前端自動化

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