團隊開發前端VUE項目代碼規范
一、規范目的：
統一編碼風格，命名規范，注釋要求，在團隊協作中輸出可讀性強，易維護，風格一致的代碼
二、開發SRC目錄：
1.Vuex目錄 （狀態樹配置）
2.Router目錄（路由配置）
3.Pages目錄 （放置主路由組件 注意命名規范）
4.Common目錄 （放置靜態文件）
5.Config目錄 （全局配置項，路由攔截，報錯信息，等枚舉信息）
6.Api目錄 （ 相關全局請求調用配置、axios、jsonp ）
7.Base目錄 （可復用功能性組件）
8.Basic目錄 （可復用樣式展示組件）
9.Components目錄（基礎組件：樣式組件等 注意組件分類規范）
10.核心：在每個目錄下面留一份TEXT或MARKDOWN文檔，annotation.txt/annotation.md，用中文批注好每個組件文件夾的功能及使用，每次在當前目錄下新建或更新當前目錄時，需要做好批注 （必須）
三、組件文件夾分類：
樣式組件分類（模態框，面板框）
可復用功能組建分類（表格組件，表單組件）
組件內部文件夾
（1）樣式文件stylus
（2）子組件或者tab組件文件夾childs
（3）靜態資源文件夾 resources
（4）組件下目錄預覽：
|— self-component
|— resources
|— childs
|— stylus
|— self-component.vue
四、靜態資源：
1.靜態高質量圖片資源
2.ICON等單個或少個復用性較高的圖片
3.復用性較高的JSON本地文件
4.媒體文件
5.分類
6.命名規則
五、組件開發：
1.可復用組件開發規范
2.樣式定義組件開發
3.單文件組件開發規范
4.擴充組件功能注意事項
六、路由定義：
1.全局路由鈎子攔截
2.懶加載中AMD規范require和ES6中的import的選擇
3.攔截條件語句篩選
4.路由名稱的可讀性以及注釋
七、接口聯調：
1.統一采用axios方式
2.登陸攔截方式
3.參數傳遞：配合query string 實現對象到uri的格式化
4.GET請求規范
5.POST請求規范
6.其他類型請求規范
7.避免拼接uri字符串參數情況的產生
8.聯調失敗，快速定位錯誤的方法
八、VUE模板語句使用規范：
1.條件 （v-if , v-else, v-if-else, v-show）合理使用 v-if 及 v-show
2.循環 （v-for、 :key）
3.樣式 （:style、:class）
4.事件綁定 （v-on、@）
5.props傳遞 （加類型判斷，不能直接數組接收）
6.其他優化細節（v-text、v-html、v-once）
九、VUEX使用規范：
1.單/多狀態樹目錄結構
2.語法糖和原生this.$store的選擇和使用注意
3.多模塊VUEX狀態樹配置和使用（目前幾個項目暫時都只涉及到單狀態樹）
4.state、mutations、actions、getters使用規范 (https://wusihe.com/2018/07/17/vuex/)
5.axios請求和state混用問題解決
十、組件開發規范：
1.組件模板開發
（1）盡可能語義化標簽，使結構更加信息，如不熟悉H5新標簽請查看下面文檔
A. http://www.w3school.com.cn/html/html5_new_elements.asp
（2）大段功能模塊都需要明確中文注釋（要求簡短明確）
（3）在代碼結構很長的情況下，需要分割線注釋批注
（4）模板語法中的邏輯盡可能在filters、computed、methods中處理
（5）Tab縮進，四個空格，層次要求分明
2.組件樣式開發
（1）基本上處於scoped 私有域開發
（2）CSS預處理器選擇stylus
A.原因：強大、方便、流行、混合書寫、變量、語言函數等
（3）樣式編寫方式
A.函數式編寫樣式 ，在common目錄下封裝好對應常用的方法，直接傳參
（4）風格：橫向編寫，分號分隔，禁止大括號，背景圖片統一相對路徑調用
（5）如果不熟悉其函數式編程風格的使用，請閱讀下面文檔
A.https://stylus.bootcss.com
B.https://www.zhangxinxu.com/jq/stylus
（6）基本調用結構預覽：
@import './stylus/self-component.stylus'
（6）如有其他想法可以更換成Sass或Less預處理器也可以
3.組件腳本開發
（1）scoped私有域下開發
（2）和模板結構處於同一文件開發
（3）生命周期及其默認結構編寫順序和規則
A.data -> props -> 生命周期函數 -> computeds -> watch -> methods -> …
B.props 統一使用對象模式，且設置好props屬性默認值和類型
十一、注釋規范：
1.TEMPLATE結構內容注釋
（1）大區塊之間需要回車換行，且有有單獨的中文注釋
2.STYLUS注釋
（1）每個大區塊的樣式的需要有單獨的中文注釋
（2）每個大區塊樣式之間需要回車換行
（3）在STYLUS自定義函數庫文件類似於mixin.styl，則需要對每個語言函數進行單獨的批注，或者一些功能類似的語言函數可以根據功能分類注釋
3.SCRIPT注釋
（1）盡可能多用單行注釋，注釋需要與被注釋的地方對齊
（2）生命周期created()、mounted()下的所有方法調用需要單獨注釋，methods里面涉及接口調用的方法一定要注釋，filters里面的過濾器需要注釋說明功能
命名規范：
1.組件文件夾命名：
（1）按照功能英文命名，過長則用 ” - ” 連接
（2）其內部的組件名稱和樣式名稱與文件夾同名
（3）其風格與微信小程序組件文件夾命名保持一致
2.靜態資源文件夾static命名：
（1）英文命名，過長則用 ” - ” 連接
（2）其主目錄需要創建一個解釋文件（annotation.txt/annotation.md），在這個解釋文件中使用中文批注好每個目錄的內容，以及每個目錄正在被哪些組件調用
3.圖片文件命名：
（1）如果是精靈圖，則需按功能命名
（2）如果是列表渲染圖片，則需要按照1-100編號命名
（3）如果是ICON圖片，則需要添加 ”icon-”前綴
十二、解釋文件：
1.定義：一個對當前目錄下所有的文件夾的一個解釋性文檔，中文批注每個文件夾下的組件功能或者資源類型，如果是資源類型文件夾，則還需批注調用該文件夾的組件名稱和路徑
2.名稱：統一命名annotation.txt/annotation.md