Vue項目目錄架構

前端開發規範之Vue項目目錄架構
概述
Vue項目開發的目錄結構保持一致，容易理解並方便構建與管理，方便往後的維護和其餘同事的閱讀。
1、Vue目錄結構

2、主要項目目錄介紹
1.build目錄是webpack主要的配置目錄

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

配置地址常量

配置自定義loader

2.config目錄是對webpack和node最基礎的配置，定義了當前所屬環境，監聽的端口號，生成靜態文件目錄位置等

其中比較重要是 index.js
配置node監聽端口、靜態文件位置，靜態文件引用前綴、node代理等

3.js目錄是項目開發過程當中的自行開發或引用的小型js庫

其中比較重要的是 http.js，封裝了axios庫的常見用法，能夠配置統一的request攔截器和response攔截器，其餘的有相似日期類庫，echarts封裝類，vue的mixin庫等

4.stylus目錄是css預處理語言目錄

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

5.其餘components、router、store目錄
這三個目錄結構是vue項目開發過程當中獨有的，分別表明vue組件目錄，vue-router配置目錄、以及vuex配置目錄。
具體規範見
vue組件開發規範
vue-router配置規範
vuex配置規範

3、結語目前開發vue項目的前端目錄結構大體與此文大檔介紹的架構一致，可能因爲不一樣項目有具體需求會進行微量修改，但大致目錄骨架與此一致，若後續進行vue項目開發，需遵循此目錄架構，以方便各位同事快速在不一樣項目間開展工做。後續若因爲技術棧更新會適當調整此文檔