工作中總結前端開發流程--vue專案
開發流程
需求 -> 原型 -> 開發 -> 測試 -> 上線
開發
1.版本控制
選用git進行版本控制。
- 新建分支進行開發,master主線,code review後進行合併。
- 利用分支,部署不同的上線版本
*根據業務需求,選擇合適的技術 -- 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 安裝依賴包
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部署。