上個項目第一次用到vue+webpack，也是我第一次嘗試自動化、模塊化的開發(fā)方式，總的來說就是結(jié)構(gòu)太爛，開發(fā)體驗差，效率低，難維護。細數(shù)的罪狀有如下幾條

• 沒有servies層，全部ajax接口都和邏輯混合在一起寫

• 只有公眾組件和頁面，頁面沒有組件化，造成每個頁面的.vue文件相當長

• 沒有將路由按模塊劃分，所有路由都寫在一個文件中，多人合作代碼經(jīng)常被覆蓋

• 所有的靜態(tài)資源都放在一起，沒有按模塊區(qū)別，靜態(tài)資源管理很不方便

針對上面的問題，這次做項目的時候，重新對項目結(jié)構(gòu)進行了調(diào)整，調(diào)整后的項目結(jié)構(gòu)如下：

上面的截圖中，build是編譯后的文件，node_modules是依賴包，webpack.config.js是webpack的配置，index.html是入口模板，這些不是本文關(guān)注的重點，本文主要是討論src里面的結(jié)構(gòu)。

公眾靜態(tài)資料目錄asserts

assets的結(jié)構(gòu)如下：

├── assets├── css # 樣式├── fonts # 字體 └── images # 圖片

主要用來放置樣式、字體文件和圖片等公共靜態(tài)資源。其實上一個項目中也有這個目錄，但是將整個項目的靜態(tài)資源都往里面放了，維護起來不方便。這個項目中，asserts只存放公共的靜態(tài)資源。

第三方插件目錄static

在項目中，經(jīng)常會用到一些沒有npm包的第三方插件。例如這次我們是做移動端的產(chǎn)品，用了淘寶自適應(yīng)方案，我們會將flexible.js等所有插件都放在static中管理。

公共方法util

可能會在多個地方調(diào)用到的公共方法，按照不同的功能歸類成多個js文件，放在util中

指令directives

directives文件夾中包含modules文件夾，和一個統(tǒng)一的入口index.js，modules里是不同指令的具體邏輯，index是所有指令的入口，方便在app.js中注冊。index.js的代碼如下：

import directive1 from '.modules/directive1'; import directive2 from '.modules/directive2'; export default {...directive1,...directive2 }

狀態(tài)管理vuex

vuex使用的是官方推薦的項目結(jié)構(gòu),modules里面是各模塊的js文件。

公共組件components

components里放置的是公共組件，每個組件有自己獨立的文件夾，里面包含.vue文件和組件的images等靜態(tài)資源文件夾。這樣的好處是，可以在組件內(nèi)部管理自己的html結(jié)構(gòu)、樣式和邏輯和靜態(tài)資源。
components的結(jié)構(gòu)如下：

├── components├── com1 # 組件1├── images # 靜態(tài)資源：圖片 └── com1.vue # template/style/script├── com2 # 組件1├── images # 靜態(tài)資源：圖片 └── com2.vue # template/style/script

路由routes

路由中包含map文件夾和入口文件index.js，map文件夾中根據(jù)模塊來劃分，每個模塊單獨一個路由配置文件，再在index.js中匯總，app.js中引入入口文件index.js就可以實現(xiàn)路由的注冊。index.js中的代碼大概如下：

// 加載不同的模塊 import order from './order'; // 訂單 import log from './log';// 登陸 export default {...order,...log, };

服務(wù)層services

在上一個項目中，沒有路由層這個概念，都是在和頁面的方法中直接調(diào)用后端提供的api，這個api很分散，不方便管理，后來看到vue-demo對services的劃分，覺得很好，就搬了過來。

services里面有個lib的文件夾，里面存放的是各種ajax類庫，如jquery的ajax、vueResource等，并且對各種類庫進行了統(tǒng)一接口的封裝和錯誤處理，暴露給外面的是統(tǒng)一的ajax接口，這樣很方便不同項目，不同類庫之間的切換。services下面根據(jù)模塊，將所有API封裝成方法，返回的是promise對象，在要用的地方直接調(diào)用方法就可以了。

頁面views

views按模塊劃分，模塊下面有頁面，頁面里面有靜態(tài)資源和組件。上一個項目中，頁面沒有拆分組件，頁面和組件的靜態(tài)資源也都放到了asserts文件夾中。這次都放到了自身的對應(yīng)文件夾下，管理起來方便了很多。結(jié)構(gòu)如下:

├── views├── module1 # 模塊1│ ├── page1 # 頁面 │ ├── components # 頁面 │ ├── com1│ ├── images // 組件1的靜態(tài)資源│ └── com1.vue # template/style/script└── page1.vue # template/style/script

這次對項目結(jié)構(gòu)重新整理后，開發(fā)的體驗好了很多，也避免了多人修改同一份文件，經(jīng)常覆蓋的問題，也大大提高了可維護性。搞項目結(jié)構(gòu)可能不需要很高深的技術(shù)，但是一個好的結(jié)構(gòu)真的是項目邁向成功的一大步。

文章也會同步發(fā)布到公眾號上，歡迎關(guān)注，歡迎提意見：

總結(jié)

以上是生活随笔為你收集整理的用vue+webpack搭建的前端项目结构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。