vue目錄解析

轉載http://div.io/topic/1834 

用vue+webpack搭建的前端項目結構  4個回覆 專欄 @ 架構

對角另外一面 發佈於 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

此次對項目結構從新整理後，開發的體驗好了不少，也避免了多人修改同一份文件，常常覆蓋的問題，也大大提升了可維護性。搞項目結構可能不須要很高深的技術，可是一個好的結構真的是項目邁向成功的一大步。