工做中總結前端開發流程--vue項目

大公司裏怎樣開發和部署前端代碼？

開發流程

需求 -> 原型 -> 開發 -> 測試 -> 上線

開發

1.版本控制
選用git進行版本控制。

• 新建分支進行開發，master主線，code review後進行合併。
• 利用分支，部署不一樣的上線版本

2.技術選型

• 根據業務需求，選擇合適的技術 -- vue-cli
• 制定統一編碼規範，便於團隊協做和代碼維護，例如eslint, tslint

3.環境配置
初始化項目完成後，提交代碼到遠程庫。
爲保持環境統一，推薦如下方式:

• 需團隊共享的 npm config 配置項
• 使用 npm: >=5.1 版本, 保持 package-lock.json 文件默認開啓配置
• 提交 package.json, package-lock.json。package.json中，項目依賴semver爲^X.Y.Z
• 項目成員首次 clone 項目代碼後，執行npm install 安裝依賴包
• node 版本約束

4.構建優化
根據實際項目，更改webpack配置。

5.目錄結構

• 模塊化
  採用模塊化的方式組織代碼：

  JS 模塊化：AMD、CommonJS、UMD、ES6 Module
  CSS 模塊化：less、sass、stylus、postCSS、css module

• 組件化
  採用組件化的編程思想，處理 UI 層

• 靜態資源管理

  1.非模塊化資源
  2.模塊化資源--與模塊一塊兒進行統一管理

開發結束後，通常也會經歷如下幾個過程：

1.需求變動，從新開發
2.code review
3.提交測試，修改bug單，迴歸測試

測試

1.SIT測試環境
測試環境，先後端分離，後臺CORS，前臺經過代理跨域。
最好採用source map方式，利於追蹤bug。
通常測試經過，bug單清零，會轉UAT測試。

2.UAT測試環境
用戶驗收測試，通常經過後，就準備部署上線。

部署

webpack進行打包後，丟到服務器上，項目上線。固然，上線前，要進行性能優化，例如配置緩存，靜態資源CDN部署。