前端自动化

1.npm管理项目包文件

2.webpack 前端构建工具:模块打包器

  代码检查ESLint:   vue 创建项目时自带:> vue init webpack 项目名    入门参考:https://morning.work/page/maintainable-nodejs/getting-started-with-eslint.html

  (flow)

  编译 scss :如何在vue2.0中使用sass/scss

  压缩合并 base64

  合并 sprite 图片或字体资源

  热加载/热更新

  built

  babel 转码工具 es6 etc.

  polyfills 使浏览器兼容 html5 特性,有 html5shiv,respond,Storage .etc  请前往神奇的    HTML5-Cross-browser-Polyfills

2.1.根据文件内容生成哈希值,实现缓存控制  参考:http://imweb.io/topic/5795dcb6fb312541492eda8c

3.node.js 构建本地服务器

3.1.mock.js 生成随机数据,拦截Ajax请求,方便前后端分离开发。

4.karma,jasmine 测试代码

5.资源

  一键压缩代码,图片https://tinypng.com/

  图标logo资源http://www.easyicon.net/

  字体图片资源http://www.iconfont.cn/

  UI设计:https://www.uisdc.com/responsive-admin-dashboard-template

  检测文件更新

  PSD .etc模板素材:

    (1)UI中国:http://www.ui.cn/
    (2)UE设计平台:http://www.uehtml.com/
    (3)UI制造者:http://www.uimaker.com/
    (4)Hiiishare:http://www.hiiishare.com/
    (5)学UI网:http://www.xueui.cn/

  适合移动端的前端 UI 框架:

    (1)Amazeui:http://amazeui.org/
    (2)MUI:http://dev.dcloud.net.cn/mui/

  element 提供了 Sketch 和 Axure 工具 对设计人员友好

6.模块化:基于ES6的开发环境下建议使用ES6模块化功能实现前端模块化,首选 ES6 module,次选 RequireJS

  模块化侧重的功能的封装,主要是针对Javascript代码,隔离、组织复制的javascript代码,将它封装成一个个具有特定功能的的模块。

  模块可以通过传递参数的不同修改这个功能的的相关配置,每个模块都是一个单独的作用域,根据需要调用。一个模块的实现可以依赖其它模块。

7.组件化:

  组件化更多关注的UI部分,页面的每个部件,比如头部,内容区,弹出框甚至确认按钮都可以成为一个组件,每个组件有独立的HTML、css、js代码,臂如 bootstrap 组件。

  可以根据需要把它放在页面的任意部位,也可以和其他组件一起形成新的组件。一个页面是各个组件的结合,可以根据需要进行组装。 

8.规范

9.单元测试

  jest

10.错误捕获 

  http://www.cnblogs.com/hustskyking/p/fe-monitor.html

  https://segmentfault.com/q/1010000004074635

11.版本管理

  https://www.zhihu.com/question/20790576/answer/32602154

12.性能监控

  http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days/

13.xshell 工具:MobaXterm

14.重构

15.本地化接口模拟 swagger

16.多环境配置,参考本次项目:餐管系统

17.首屏加载:骨架屏 skeleton screen

猜你喜欢

转载自www.cnblogs.com/yuqlblog/p/11335618.html