一、項目使用技術(shù)棧：

vue2、 vue-router、 vuex、 axios、關(guān)于ui的框架選取，依項目而定（例如pc版element ui，ivew ui，移動端 mint ui）。

二、項目的搭建：

個人習慣使用vue-cli腳手架構(gòu)建項目，項目使用vue-cli腳手架工具生成項目結(jié)構(gòu)如下：

同時，對于靜態(tài)文件而言，可以放在static文件夾便于統(tǒng)一緩存處理，static文件夾目錄如下：

對于項目結(jié)構(gòu)而言，個人認為對于項目各功能模塊的統(tǒng)一集中單一的設(shè)計劃分便于維護管理，故src目錄設(shè)計如下：

目錄配置說明如下：

1、api接口文件，用來對請求接口進行統(tǒng)一的配置，便于維護;

2、config用來定義常用的配置

3、Filter用來定義過濾器

4、Http：用來定義請求攔截器，統(tǒng)一的請求攔截配置，如果對安全性要求較高也可以統(tǒng)一對請求加密。

5、Lang國際化多語言包（非國際化項目不需要此目錄）

6、Router定義統(tǒng)一的路由文件，便于管理維護和監(jiān)聽。

7、store狀態(tài)管理，對于大型項目而言，盡量在modules里面按功能劃分不同的狀態(tài)文件，而非耦合在一起，而且盡量只對數(shù)據(jù)的操作進行處理，對于其它的操作不建議放在vuex里面（例如axios數(shù)據(jù)請求），而保持單一的數(shù)據(jù)處理功能。

8、utils常用方法，功能的封裝，高可用性，減少重復(fù)。

9、補充如果有需要自定義指令之類的，也可能新增指令文件。

配置功能組件Components功能模塊劃分設(shè)計如下：

說明：

1、common用來存放通用組件 ;

2、home組件用來分放各個功能模塊，示例代碼如下：

3、systemManage作為一個功能模塊，通過index.vue文件進行本模塊各功能的路由分放。切換不同的功能頁面。Index.vue示例代碼如下：

三、項目的注意事項：

1、對于通用組件的封裝重構(gòu)，可以提高復(fù)用性;

2、關(guān)于父子組件傳參，盡量使用props,emit而非vuex,vuex用于多組件之間。

3、不建議使用scope，破壞了css的共享性;同時也不建議在組件里面style寫樣式，如果按需加載時，多組件共享樣式。會發(fā)生樣式未加載情況。

4、遵守項目的編碼規(guī)范。

補充：

個人負責的vue項目的架構(gòu)實際使用經(jīng)驗而言,項目在使用三百多個路由時，未發(fā)現(xiàn)問題，同時對于大型系統(tǒng)的項目，個人感覺可以拆分成不同的子系統(tǒng)進行組合，不過沒有機會實踐。