前言
通過本問將看到我在vue的項目中，進行的一系列的項目優化，然後看到不同的維度將這些點進行分類。
這裏更多的指的是設計考慮的思路，是大綱，暫不涉及實際代碼。
項目架構
分模塊設計思想
在接到項目之後，首先將store,router，xhr的對應三個部分分別分子模塊，每個子模塊的劃分維度有所差別。 – 其中store劃分modules劃分維度是數據關聯性，由於store本身支持modules的組合，而且使用是混合在一起的，所以我們還是會在index中將模塊進行混入的。 – 其中router是按照業務進行分模塊的，或者說是按照頁面維度分的，每個一級路由分一個路由模塊，二級路由爲頁面名稱，其中將一級路由設置爲文件夾名稱，二級路由路徑與頁面名稱同名，爲了簡化這部分，一級路由的名稱定爲‘scope’，而且爲了同時支持懶加載和優化引入組件的寫法，寫了_import的優化方法，可以批量按照文件名引入對應的組件，在生產環境將進行路由代碼分割。然後不同模塊也是最後彙總到router的modules中。 – 其中xhr的部分按照後端的微服務進行拆分模塊，方便查看和維護。按照後端的接口層次再決定是否劃分二級對象屬性，其中暴露出來的方法與後端同名，後續也是決定採用easymock進行批量生成api方法來優化這部分手寫代碼的工作。考慮到幾乎沒有一個頁面或者組件會用到多餘兩個的api微服務請求，所以這就決定了我在index.js中並沒有收集聚合每個業務的api，而是選擇開發時按需加載。而對於通用性比較高的api，我一方面會定義在index.js中，另一方面會把這部分數據暴露在vuex中來達到目的。 – 額外介紹，除了以上三個，我針對src根目錄也設置了過濾器的分業務模塊實現方案。這部分由於各個業務耦合情況比較少，所以也是僅僅針對核心的工具過濾器暴露在index.js中，其他的都是按需引入。
業務內公共組件
與有的同學考慮不同的是，我在寫一些組件的時候，針對業務性比較強，但是針對當前業務公用的一些拆分組件會定義在每個業務的components目錄下，而不是放在src/components,我稱之業務內公共組件。
業務內枚舉 與 全局枚舉
其實很多時候會遇到枚舉數據，或者是後端定義好的，或者是前端定義好的，或者是接口請求的但是基本不做更改的。也許枚舉字段少的也還好，但如果一個數據項有超過十個枚舉項，有超過2個頁面使用的時候，你應該考慮的是單獨的放在枚舉字典文件中去維護。 那麼首先，我是建議基於這個業務的枚舉建在業務的根目錄下新建一個enum的js枚舉文件，單獨用來承載業務中的枚舉。但較多時候會有一些比較讓人煩惱的部分：
1 業務中的枚舉發現另外的頁面中也有用，不單單屬於這個一級業務頁面。那麼你可以這樣考慮下：首先肯定是維護一份數據的，那麼維護在哪裏，如果是核心業務，那就維護在全局枚舉倉庫，然後業務中進行按需引入或者改裝。如果是周邊業務，偶爾用下，我個人覺得維護在業務中的枚舉是比較好的。
2 枚舉與過濾器與字段翻譯的關係。其實枚舉字段不僅僅是用於做枚舉的，還必然的會充當一些下拉框，顯示值的遍歷來源，也可以當做字段翻譯的翻譯來源，同時還可以當做我們一些業務字段的過濾器。這部分理解好之後，對於我們優化整理項目中的業務數據類型有着極大的好處。
3 全局枚舉業務過濾器，通用性過濾器，當然這些過濾器功能除了按照基本的部分，還會按照業務中收集到的部分進行業務過濾器的維護。同時也作爲對應的方法來獲得對應值轉換值的語法，一者兩得。
common組件
- 純ui組件，elementui組件進行進一步的封裝，按照其官方的維護方式進行自己項目需求的一些分類。
- 佈局內基本佈局組件，這裏麪包括了頁面架構，菜單，頂部，主題頁面。
- 可分解於任何頁面任何位置的特徵業務組件，支持其展現到任何位置任何頁面中，只要求其對應的業務數據要求即可。
- 功能性組件，包括圖片上傳，自定義的模態框
theme
爲了維護基本的風格，設置了一些基本的主題變量，然後針對elementui的核心組件修改器風格顏色。
axios攔截
針對axios的部分進行請求前後攔截，針對特定狀態碼進行翻譯，在這個設置中進行vuex必要的接口token必要性的驗證以及引入提示組件進行必要的接口提示。
針對業務的整合需求，進行接口的串聯、並聯的請求優化。
mixins
將常用的優化方法進行mixins進行混入。
典型代碼段優化
用數據做邏輯，減少標籤的顯示控制
看到很多前端會根據數據的某個字段，然後寫v-if 決定這個標籤是否顯示，然後不是這個字段，另外一個顯示。建議在不管是對象還是數組的顯示控制中，直接根據需要的數據進行數據改裝，不用多條件判斷類似的組件渲染。這種代碼簡單的可以用一個標籤承載，內容的顯示區別簡單的可以用三目，複雜的就應該在js方法中進行改造完之後或者過濾器實現。
<span v-if="sex===male" >男</span> <span v-else >女<span>
揮之不去的靜態複製寫法
vue提供了良好的數組循環和對象循環的方法，在我們實現類似的頁面需求的時候，不建議再和之前一樣，寫很多維護性不強的頁面列表了。把它用一個數組維護，然後v-for循環實現，對於因爲大量的這種代碼佔據篇幅的話，說明還是 沒有很好的理解vm的含義。
<option value='1'>1</option> <option value='2'>2</option> <option value='3'>3 </option>
除了if,else想不到其他邏輯方式
然後就看到一大波人會if，age===0,判斷，else if 等等。其實除了這些你還有switch,對象屬性字面量方式，switch方式，等等。不要讓if,else的嵌套循環成爲我們寫代碼的唯一方式。
<option value='0'>0</option> <option value='18'>未成年</option> <option value='60'>老年 </option>