前言
最近幫組里面新人做code review, 順帶回顧了一下以前項目的代碼。問題是真的不少，雖然盡量統一規范，但每個人的代碼風格還是有所區別的，很難讓人滿意。在項目開發的時候，我也經常會遇到有些部分可以用更有效率和易維護的代碼實現，但是因為項目進度的原因選擇了更省事的寫法，雖然后來會在有時間的時候回去優化，但不能否認的是大部分還是沒有時間再去修正的。所以我系統總結了一下我在Vue開發中遵循的規則，希望自己能夠嚴格規范代碼，同時也分享給大家參考。
項目結構
建項目是技術確認后正式開發的第一步，一個合理的項目目錄結構會在規范整個項目的代碼風格上有很大幫助。首先先看一下我用vue-cli建的vue項目
在這里我只介紹src內部目錄
- api
這個目錄是用來封裝和服務端交互的api的，比較通用的寫法 - assets
用來存放圖片，字體等等靜態資源 - business
這個目錄是用來存放視圖和業務分離后業務部分的代碼的，我會在下面詳細介紹 - components
用來存放一些封裝好的公共組件，或基礎組件。如果是只在某個頁面單獨使用的組件，一般放到views目錄下。 - lang
用來存放國際化的多語言相關的文件 - model
該目錄下一般用來存放兩種model,一種是頁面的viewModel,一種是網絡請求的數據model,我會在下面詳細介紹 - router
存放vue-router的路由文件 - store
存放vuex的store文件 - utils
該目錄下一般放一些工具類或靜態數據，比如說對日期處理的封裝函數，還有靜態的變量名之類的數據。 - views
該目錄下放項目的主要代碼，一般來說該目錄下的一個子目錄對應一個頁面。
代碼分離
在Vue開發中，我見過包括我自己在內的很多開發人員都會犯的一個錯誤，那就是視圖代碼和業務代碼過度耦合。非常簡單的一個例子，業務比較復雜的頁面的，寫到后期經常會出現一個.vue文件里面寫了最少上千行代碼，導致無論繼續開發或者是后期維護都變得非常費時費力，究其原因是因為把很多業務、數據上的處理都放到了這一個.vue文件里面。
要想解決這個問題，那就必須要分離代碼，在和視圖有關的.vue文件中，只允許存在和視圖UI操作有關的代碼。下面是一個對模板增刪改查的.vue文件的分離寫法。
在這里我將Template.vue這個文件有關的所有業務處理，以及進行網絡請求的數據處理都放到business目錄下的template.business.js這個文件中，在.vue文件中只保留對UI對基本操作。而在相應的template.business.js中，如果業務很復雜的話，也可以對這個js文件進行模塊劃分，這樣對于相應業務的邏輯會更加清晰，讓復雜的項目代碼也會具有較高的可維護性和易讀性。
數據處理
在前端開發中，當通過網絡請求獲取、提交數據時，接口提交、返回當數據格式和頁面渲染時用的當數據格式很有可能并不相符，所以對于這部分一般需要做數據轉換。數據轉換我一般會封裝到model目錄下，每一個網絡請求都對應于一個數據Model和一個View Model,在進行http請求獲取數據時生成一個普通的數據Model的實例，然后轉換成適合頁面渲染的View Model。當進行數據提交時，將頁面的view Model轉換成普通的數據Model然后進行http請求。
總結
以上的這些方法在開發的時候稍微麻煩一些，肯定不如直接在.vue文件里直接寫要方便。但是當項目開發到后期，代碼量越來越多時，或者有需求要改動時，就會發現這些額外的工作是完全有價值的。
