vue項目工程化規範

前言

在一個團隊中，通常會同時有多個項目在開發，咱們除了要開發本身主要負責的項目，偶爾也會由於客觀因素去開發別的團隊或我的主導的項目。這時問題就出現了，咱們須要花必定的時間去了解項目的目錄結構，而且努力遵循當前項目的一些潛在的規範（即便這些規範心裏是拒絕的，爲了避免破壞總體性也會去遵照）。那麼咱們對於採用vue技術棧的項目發現有一些能夠改進和規範的地方，如：文件命名不規範，開發目錄結構不統一等。

目的

統一命名規範，統一開發目錄結構。借用egg.js中的設計思想就是：在團隊內部採用這種方式能夠減小開發人員的學習成本，開發人員再也不是『釘子』，能夠流動起來。沒有約定的團隊，溝通成本是很是高的，好比有人會按目錄分棧而其餘人按目錄分功能，開發者認知不一致很容易犯錯。

文件命名規範

folder：文件夾命名採用中劃線鏈接
反例：serviceCustomer ServiceCustomer Users uiComponents
推薦：service-customer users

.js：通常的js文件採用小駝峯的命名方式。若是是類文件，則使用大駝峯的命名方式
反例：service-customer.js
推薦：serviceCustomer.js ServiceCustomer.js(僅限類文件)

.vue：官方推薦使用大駝峯或者中劃線的方式命名。單文件組件官方命名規範
反例：myComponent.vue
可以使用：MyComponent.vue
推薦：my-component.vue

引入vue組件的時候須要轉換爲大駝峯 推薦：import MyComponent from '@/components/my-component'
以上命名規範是在參考iview，iview-admin，element等一些vue開源項目並結合vue官方文檔以及當前的開發習慣得出的推薦用法。
更多vue的風格指南請參考官方風格指南

目錄結構

此目錄爲src文件下的目錄結構

├── api
│   ├── user.js
│   └── news.js
├── assets
│   └── images
├── components
│   └── biz-alert
│       ├── index.js
│       └── biz-alert.vue
│   └── cell-group
│       ├── index.js
│       └── cell-group.vue
├── libs
│   ├── ajax.js
│   └── excel.js
├── mixins
│   ├── news.js
│   └── user.js
├── router
│   └── modules
│       ├── news.js
│       └── users.js
│   └── index.js
├── store
│   └── modules
│       ├── news.js
│       └── users.js
│   └── index.js
├── styles
│   └── common.css
├── utils
│   └── util.js
├── views
│   ├── news
│   └── users
├── App.vue
└── main.js
複製代碼

api

api目錄用於存放api請求，即全部的api都放在這個目錄下進行管理，無特殊狀況不要在項目的其餘文件夾或文件中出現api路由。文件命名採用相似apiUser.js的命名方式，以便區分是api或者是別的js文件。api目錄下對不一樣模塊再進行分類管理，如用戶相關的api統一寫在apiUser.js中，訂單統一寫在apiOrder.js中。

採用這種目錄及命名的緣由：

1. 根據業務模塊，對api進行模塊劃分，方便管理和維護。
2. js命名方式遵循文件命名規範，在此基礎上加上前綴api，以便區分api文件。
3. export default apiUser 根據sonar的規範(By convention, a file that exports only one class, function, or constant should be named for that class, function or constant. Anything else may confuse maintainers.)。必須和文件名同樣

   

assets

assets目錄主要存放圖片文件，圖片文件命名沒有標準的規範。可參考圖片命名規範

components

存放公共組件，在一個項目中或多或少的存在一些複用的組件，這一類的組件統一在這個目錄下進行管理。
建議每個組件用一個單獨的目錄進行管理，在index.js把組件暴露出去，這種作法方便作一些擴展。帶來的問題是，可能須要多建立一個index.js，多寫幾行代碼。
採用這種目錄結構以及引入index.js的方式，主要參考一些開源的後臺管理項目。iview-admin ，iview， 飛冰的ICE Design Pro的模板。

libs

libs目錄存放插件封裝和配置, 好比 axios,vue-lazy等

mixins

mixins目錄用來存放各個混入對象

router

router目錄用來存放路由信息和導航守衛。
大型項目中建議在router/index.js管理全部路由相關的內容，包括路由的基本配置信息、導航守衛。路由信息則按照模塊來管理，在方便管理路由信息的同時避免某個文件過大（超過800行），這樣的組織結構會更加清晰，demo以下。也可參考vue-element-admin
中型項目能夠在一個文件中管理路由信息，在index.js中配置導航守衛。可參考 iview-admin
小項目中能夠在router/index.js中管理全部的路由信息及導航守衛。\

優勢：

1. 職責明確
2. 結構清晰，易於管理

不推薦：

1. 在main.js中處理導航守衛，帶來的問題main.js職責不明確，文件過大
2. 路由文件超過800行（目前的項目中的路由信息，有部分存在或即將存在這個問題）

store

store目錄主要用於vuex狀態管理。

styles

styles目錄用於存放一些公共的樣式文件。

utils

utils 目錄存放輔助函數。

views

views爲業務視圖。
這個目錄下的結構組織可根據模塊或者頁面去組織。

總結

遵循上述的規範，能避免咱們在開發過程當中的一些癢點，優化咱們的項目結構。目的是讓幫助咱們開發人員在各個項目中流動，大大下降學習和熟悉項目的成本。
這個項目結構的規範主要借鑑了egg的設計思想，並參考了部分開源項目的設計和命名規範。

參考資料

Vue工程化最佳實踐
vue官方風格指南
egg文檔
iview
iview-admin
vue-element-admin
vant風格指南
飛冰 Ice Design Pro模板