vue開發文檔規範

Vue項目組織規範

一、 項目搭建環境

1. 開發環境：node

2. Vue項目搭建工具

   a) Webpack + vue-cli

3. 項目安裝

   a) vue init webpack projectName

   b) cd projectName

   c) npm install

   d) npm run dev

4. 開發工具

   a) Vscode

5. 代碼檢測工具

   a) ESLint

二、 開發規範

1. 目錄結構

|— build					建構腳本目錄
	|— build.js				生産環境建構（編譯打包）腳本
	|— check-versions.js		版本驗證工具
	|— utils.js				建構相關工具方法（主要用來處理css類檔案的loader）
	|— vue-loader.conf.js		處理vue中的樣式
	|— webpack.base.conf.js		webpack基礎配置
	|— webpack.dev.conf.js		webpack開發環境配置
	|— webapck.prod.conf.js		webpack生産環境配置
|— config				項目配置
	|— dev.env.js			開發環境變量
	|— index.js				主配置檔案
	|— prod.env.js			生産環境變量
	|— test.env.js			測試環境變量
|— node_modules				項目依賴子產品
|— mock					mock資料目錄，用于本地資料模拟
|— src					項目源碼目錄
	|— assets				資源目錄，資源會被webpack建構
	    |— js				公共js檔案目錄
	    |— css				公共樣式檔案目錄
	    |— images			圖檔存放目錄
	|— components			公共元件目錄
	    |— com1				元件1
	        |— images			靜态資源
	|— com1.vue		template/style/script
	    |— com2				元件2
	        |— images			靜态資源
		   |— com2.vue		template/style/script
	|— common 
	    |— network 			存放項目的網絡子產品，接口
	|— tools			自己封裝的一些工具
	|— App.vue				根元件
	|— main.js				入口js檔案
	|— routers				前端路由目錄
	    |— index.js
	|— pages				前端頁面檔案
	|— vuex				應用級資料管理
		|— index.js			組裝子產品并導出，統一管理導出，也可命名為store.js
		|— state.js			單一狀态樹，定義應用資料結構及初始化狀态
		|— getters.js			擷取state中的狀态，僅單向擷取資料，不做任何修改
		|— actions.js			調用mutation方法對資料進行操作	
		|— mutation-types.js		存放vuex常用的變量
		|— mutations.js		定義state資料的修改操作
	|— api				抽離出的api請求
|— static				純靜态資源，不會被webpack建構，eg:沒有npm包子產品
|— test					測試
	|— unit				單元測試
	|— e2e				e2e測試
|— .babelrc				babel的配置檔案
|— .editorconfig			編輯器的配置檔案
|— .gitignore				git的忽略配置檔案
|— .postcssrc.js			postcss的配置檔案
|— index.html				html模闆，入口頁面
|— package.json				npm包配置檔案，依賴包資訊
|— README.md				項目介紹
           

2. 檔案、元件命名規範，結構規範

a) 元件命名

元件檔案名應該始終以單詞大寫開頭（PascalCase），元件名也是以單詞大寫開頭，當多個單詞拼寫成的元件時，單詞開頭大寫，采用駝峰式命名規則。一般是多個單詞全拼，減少簡寫的情況，這樣增加可讀性。元件應該都放到components檔案夾下，單個頁面獨立一個檔案夾，用來放相對應的vue檔案以及頁面相關的樣式檔案，樣式少可直接寫到頁面元件裡邊，這樣更符合元件化的思想。檔案夾名稱應統一格式，小寫開頭，統一以page結尾，比如homePage，loginPage，listPage這樣子的命名。公用元件應該統一放到public檔案下，公共的樣式檔案應該抽取放到統一的檔案去統一管理，比如:TodoItem.vue,TodoList.vue。

b) 基礎元件命名

• i. 當項目中需要自定義比較多的基礎元件的時候，比如一些button，input，icon，建議以一個統一的單詞Base開頭，或者放到base檔案夾統一管理，這樣做的目的是為了友善查找。
• ii. 頁面級元件應該放到相對應頁面檔案夾下，比如一些元件隻有這個頁面用到，其他地方沒有用到的，可以直接放到頁面檔案夾，然後以父元件開發命名。
• iii. 項目級元件一般放到公共檔案夾public下給所有的頁面使用。

c) 元件結構

i. 元件結構一個遵循從上往下是template，script，style的結構

d) 元件樣式

i. 單個元件樣式一般可直接寫到元件下style标簽下，為了防止樣式污染，可添加scoped 屬性，也可以通過設定作用域來防止樣式污染，寫樣式的時候盡量少寫元素選擇器，為了提高代碼查找速度，可以用類選擇器。

e) 多屬性編寫格式

i. 當元件定義很多的props屬性值時，應該每個特性屬性一行。

f) Props定義

i. 當定義元件時，應該對傳入元件的props進行嚴格的定義，至少指定類型，設定預設值，定義好規範友善他人使用。

g) 位v-for 增加鍵值Key，這樣加快查找速度

h) 當頁面用到一些共享的狀态的時，建議使用vuex

3. 檔案格式

a) UTF-8

4. 頁面中class命名要求

a) 命名中盡量避免使用中文拼音，應該采用更簡明有語義的英文單詞進行組合

b) 采用下劃線命名，例如”shop_list”,避免和第三方ui庫命名沖突

5. 資源路徑編譯規則

a) 如果是絕對路徑，會原樣保留

b) 如果路徑以.開頭，将會被看做相對子產品依賴

c) 如果路徑以@開頭，也會被看作一個子產品依賴，需要在webpack配置中配置即可。

d) 檔案擴充名例如.js,.vue可以省略，也可以在webpack中配置

6. CSS

a) css使用stylus，.vue以局部css來寫值作用于目前檔案。

7. 注釋規範

• a) 每個方法的頂部加上注釋
• b) Html中每個功能區的開頭和結束都寫上注釋
• c) 每個功能區的css也注明開始和結束

• d) 每個字段和變量後面加上注釋

  以下情況填寫注釋：

• a. 公共元件的使用說明
• b. 各元件中重要函數或者類說明
• c. 複雜的業務邏輯處理說明
• d. 特殊情況的代碼處理說明，對于特殊用途的變量、存在臨界值、使用了某種算法思路進行注釋說明
• e. 注釋塊必須以/(兩個星号)/
• f. 單行注釋使用 //

8. 編碼規範

盡量按照ESLint格式要求編寫代碼

• a) 使用ES6風格編碼源碼

  定義變量使用let,定義常量使用const

  使用export,import子產品化

• b) 元件props原子化

  提供預設值

  使用type屬性校驗類型

  使用props之前先檢查prop是否存在

• c) 避免this.$parent
• d) 謹慎使用this.$refs
• e) 無需将this指派給component變量
• f) 調試資訊 console.log() debugger使用完及時删除

9. Js中的命名規範

• 自定義變量名

  i. 駝峰式，首字母小寫命名規範書寫

  ii. 數字類型以n開頭，字元串以s開頭，布爾類型以b開頭，對象以o開頭，數組以a開頭。Eg:nAge=29、sName=”Jone”

• 自定義常量名

  i. 常量名采用大寫+ _下劃線規範書寫

• 函數名

  i. 駝峰式，首字母小寫命名規範

  ii. 以操作類型+操作對象

  iii. 操作類型如下：

  新增類(add)、編輯類(edit)、删除類(delete)、查詢單個類(get)、查詢清單類(search)、列印類(print)、上傳類(upload)、下載下傳類(download)、導入類(import)、導出類(export)、檢驗類(check)、重置類(reset)、同步類(syn)、分頁類(page)

三、 接口請求

• 請求用Axios ，Axios 是一個基于 promise 的 HTTP 庫，可以用在浏覽器和 node.js 。
• Axios請求接口加密。

四、 Vue官方風格指南

https://cn.vuejs.org/v2/style-guide/

五、開發文檔參考