團隊開發前端VUE項目代碼規範

團隊開發前端VUE項目代碼規範

2018年09月22日 20:18:11 個人小英短 閱讀數 1658

 

1、規範目的：

 

統一編碼風格，命名規範，註釋要求，在團隊協做中輸出可讀性強，易維護，風格一致的代碼

 

2、開發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，用中文批註好每一個組件文件夾的功能及使用，每次在當前目錄下新建或更新當前目錄時，須要作好批註 （必須）

 

 

 

3、組件文件夾分類：

 

樣式組件分類（模態框，面板框）

可複用功能組建分類（表格組件，表單組件）

組件內部文件夾

（1）樣式文件stylus 

（2）子組件或者tab組件文件夾childs

（3）靜態資源文件夾 resources

（4）組件下目錄預覽：

 

      |— self-component

         |— resources

         |— childs

         |— stylus

         |— self-component.vue

 

4、靜態資源：

 

1.靜態高質量圖片資源

2.ICON等單個或少個複用性較高的圖片

3.複用性較高的JSON本地文件

4.媒體文件

5.分類

6.命名規則

 

5、組件開發：

 

1.可複用組件開發規範

2.樣式定義組件開發

3.單文件組件開發規範

4.擴充組件功能注意事項

 

6、路由定義：

 

1.全局路由鉤子攔截

2.懶加載中AMD規範require和ES6中的import的選擇

3.攔截條件語句篩選

4.路由名稱的可讀性以及註釋

 

7、接口聯調：

 

1.統一採用axios方式

2.登錄攔截方式

3.參數傳遞：配合query string 實現對象到uri的格式化

4.GET請求規範

5.POST請求規範

6.其餘類型請求規範

7.避免拼接uri字符串參數狀況的產生

8.聯調失敗，快速定位錯誤的方法

 

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）

 

9、VUEX使用規範：

 

 1.單/多狀態樹目錄結構

 2.語法糖和原生this.$store的選擇和使用注意

 3.多模塊VUEX狀態樹配置和使用（目前幾個項目暫時都只涉及到單狀態樹）

 4.state、mutations、actions、getters使用規範 (https://wusihe.com/2018/07/17/vuex/)

 5.axios請求和state混用問題解決

 

 

10、組件開發規範：

 

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屬性默認值和類型  

 

 

11、註釋規範：

 

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-」前綴

 

 

12、解釋文件：

 

1.定義：一個對當前目錄下全部的文件夾的一個解釋性文檔，中文批註每一個文件夾下的組件功能或者資源類型，若是是資源類型文件夾，則還需批註調用該文件夾的組件名稱和路徑

2.名稱：統一命名annotation.txt/annotation.md