Vue項(xiàng)目目錄架構(gòu)

王偉廷發(fā)布于2019-08-22 18:39 / 794人閱讀

摘要：前端開(kāi)發(fā)規(guī)范之項(xiàng)目目錄架構(gòu)概述項(xiàng)目開(kāi)發(fā)的目錄結(jié)構(gòu)保持一致，容易理解并方便構(gòu)建與管理，方便日后的維護(hù)和其他同事的閱讀。

前端開(kāi)發(fā)規(guī)范之Vue項(xiàng)目目錄架構(gòu)
概述
Vue項(xiàng)目開(kāi)發(fā)的目錄結(jié)構(gòu)保持一致，容易理解并方便構(gòu)建與管理，方便日后的維護(hù)和其他同事的閱讀。
一、Vue目錄結(jié)構(gòu)

二、主要項(xiàng)目目錄介紹
1.build目錄是webpack主要的配置目錄

其中比較重要是 webpack.base.conf.js
兼容ES6配置

配置地址常量

配置自定義loader

2.config目錄是對(duì)webpack和node最基礎(chǔ)的配置，定義了當(dāng)前所屬環(huán)境，監(jiān)聽(tīng)的端口號(hào)，生成靜態(tài)文件目錄位置等

其中比較重要是 index.js
配置node監(jiān)聽(tīng)端口、靜態(tài)文件位置，靜態(tài)文件引用前綴、node代理等

3.js目錄是項(xiàng)目開(kāi)發(fā)過(guò)程中的自行開(kāi)發(fā)或引用的小型js庫(kù)

其中比較重要的是 http.js，封裝了axios庫(kù)的常見(jiàn)用法，可以配置統(tǒng)一的request攔截器和response攔截器，其他的有類(lèi)似日期類(lèi)庫(kù)，echarts封裝類(lèi)，vue的mixin庫(kù)等

4.stylus目錄是css預(yù)處理語(yǔ)言目錄

主要的樣式文件
base --- 基礎(chǔ)組件樣式
mixin --- 混合函數(shù)庫(kù)
reset --- 重置樣式庫(kù)
variable --- 全局變量聲明

5.其他components、router、store目錄
這三個(gè)目錄結(jié)構(gòu)是vue項(xiàng)目開(kāi)發(fā)過(guò)程中獨(dú)有的，分別代表vue組件目錄，vue-router配置目錄、以及vuex配置目錄。
具體規(guī)范見(jiàn)
vue組件開(kāi)發(fā)規(guī)范
vue-router配置規(guī)范
vuex配置規(guī)范

三、結(jié)語(yǔ)
目前開(kāi)發(fā)vue項(xiàng)目的前端目錄結(jié)構(gòu)大致與此文大檔介紹的架構(gòu)一致，可能由于不同項(xiàng)目有具體需求會(huì)進(jìn)行微量修改，但大體目錄骨架與此一致，若后續(xù)進(jìn)行vue項(xiàng)目開(kāi)發(fā)，需遵循此目錄架構(gòu)，以方便各位同事快速在不同項(xiàng)目間開(kāi)展工作。
后續(xù)若由于技術(shù)棧更新會(huì)適當(dāng)調(diào)整此文檔