工作中總結前端開發流程--vue專案

摘要： 開發流程 需求 -> 原型 -> 開發 -> 測試 -> 上線 開發 1.版本控制 選用git進行版本控制。 新建分支進行開發，master主線，code review後進行合併。 利用分支，部署不同的上線版...

開發流程

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

開發

1.版本控制

選用git進行版本控制。

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

3.環境配置

初始化專案完成後，提交程式碼到遠端庫。

為保持環境統一，推薦以下方式:

• 需團隊共享的 npm config 配置項
• 使用 npm: >=5.1 版本, 保持 package-lock.json 檔案預設開啟配置
• 提交 package.json, package-lock.json。package.json中，專案依賴semver為^X.Y.Z
• 專案成員首次 clone 專案程式碼後，執行npm install 安裝依賴包

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部署。