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.规范
- http://codeguide.bootcss.com/
- http://tguide.qq.com/main/index.htm
- http://cssguidelin.es/
- https://github.com/adamlu/javascript-style-guide
-
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
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