對角另一面 發布於 4 月前
上個項目第一次用到vue+webpack，也是我第一次嘗試自動化、模塊化的開發方式，總的來說就是結構太爛，開發體驗差，效率低，難維護。細數的罪狀有如下幾條
- 沒有servies層，全部ajax接口都和邏輯混合在一起寫
- 只有公眾組件和頁面，頁面沒有組件化，造成每個頁面的.vue文件相當長
- 沒有將路由按模塊划分，所有路由都寫在一個文件中，多人合作代碼經常被覆蓋
- 所有的靜態資源都放在一起，沒有按模塊區別，靜態資源管理很不方便
針對上面的問題，這次做項目的時候，重新對項目結構進行了調整，調整后的項目結構如下：
上面的截圖中，build是編譯后的文件，node_modules是依賴包，webpack.config.js是webpack的配置，index.html是入口模板，這些不是本文關注的重點，本文主要是討論src里面的結構。
公眾靜態資料目錄asserts
assets的結構如下：
├── assets
├── css # 樣式
├── fonts # 字體
└── images # 圖片
主要用來放置樣式、字體文件和圖片等公共靜態資源。其實上一個項目中也有這個目錄，但是將整個項目的靜態資源都往里面放了，維護起來不方便。這個項目中，asserts只存放公共的靜態資源。
第三方插件目錄static
在項目中，經常會用到一些沒有npm包的第三方插件。例如這次我們是做移動端的產品，用了淘寶自適應方案，我們會將flexible.js等所有插件都放在static中管理。
公共方法util
可能會在多個地方調用到的公共方法，按照不同的功能歸類成多個js文件，放在util中
指令directives
directives文件夾中包含modules文件夾，和一個統一的入口index.js，modules里是不同指令的具體邏輯，index是所有指令的入口，方便在app.js中注冊。index.js的代碼如下：
import directive1 from '.modules/directive1';
import directive2 from '.modules/directive2';
export default {
...directive1,
...directive2
}
狀態管理vuex
vuex使用的是官方推薦的項目結構,modules里面是各模塊的js文件。
公共組件components
components里放置的是公共組件，每個組件有自己獨立的文件夾，里面包含.vue文件和組件的images等靜態資源文件夾。這樣的好處是，可以在組件內部管理自己的html結構、樣式和邏輯和靜態資源。
components的結構如下：
├── components
├── com1 # 組件1
├── images # 靜態資源：圖片
└── com1.vue # template/style/script
├── com2 # 組件1
├── images # 靜態資源：圖片
└── com2.vue # template/style/script
路由routes
路由中包含map文件夾和入口文件index.js，map文件夾中根據模塊來划分，每個模塊單獨一個路由配置文件，再在index.js中匯總，app.js中引入入口文件index.js就可以實現路由的注冊。index.js中的代碼大概如下：
// 加載不同的模塊
import order from './order'; // 訂單
import log from './log';// 登陸
export default {
...order,
...log,
};
服務層services
在上一個項目中，沒有路由層這個概念，都是在和頁面的方法中直接調用后端提供的api，這個api很分散，不方便管理，后來看到vue-demo對services的划分，覺得很好，就搬了過來。
services里面有個lib的文件夾，里面存放的是各種ajax類庫，如jquery的ajax、vueResource等，並且對各種類庫進行了統一接口的封裝和錯誤處理，暴露給外面的是統一的ajax接口，這樣很方便不同項目，不同類庫之間的切換。services下面根據模塊，將所有API封裝成方法，返回的是promise對象，在要用的地方直接調用方法就可以了。
頁面views
views按模塊划分，模塊下面有頁面，頁面里面有靜態資源和組件。上一個項目中，頁面沒有拆分組件，頁面和組件的靜態資源也都放到了asserts文件夾中。這次都放到了自身的對應文件夾下，管理起來方便了很多。結構如下:
├── views
├── module1 # 模塊1
│ ├── page1 # 頁面
│ ├── components # 頁面
│ ├── com1
│ ├── images // 組件1的靜態資源
│ └── com1.vue # template/style/script
└── page1.vue # template/style/script
這次對項目結構重新整理后，開發的體驗好了很多，也避免了多人修改同一份文件，經常覆蓋的問題，也大大提高了可維護性。搞項目結構可能不需要很高深的技術，但是一個好的結構真的是項目邁向成功的一大步。