Vue.js命名風格指南

（題圖：梵高-黃房子）

---

前言

本命名風格指南推薦了一種統一的命名規範來編寫 Vue.js 代碼。這使得代碼具備以下的特性：

• 統一團隊的命名規範，其它開發者或是團隊成員更容易上手閱讀和理解。
• IDEs 更容易理解代碼，從而提供高亮、格式化等輔助功能。
• 本指南只是我的總結概括的，僅做爲一種參考。

命名分類

如今經常使用的vue命名規範無外乎四種：

• camelCase（駝峯式 ）
• kebab-case（短橫線鏈接式）
• PascalCase（帕斯卡命名式）
• Snake（下劃線鏈接式）

文件夾命名

若是你展開 node_modules 中的項目依賴，你會發現，幾乎全部的項目文件夾命名都是 kebab-case 命名的，使用kebab-case命名的文件夾比camelCase命名的文件夾看起來更清晰。

屬於components文件夾下的子文件夾，也統一使用 kebab-case 的風格。

組件命名

一、自定義組件名必須是多個單詞組合的，而且是完整的單詞而不是單詞的縮寫。

// 錯誤
components/
|- sd-settings.vue
|- u-prof-opts.vue

// 正確
components/
|- student-dashboard-settings.vue
|- user-profile-options.vue
複製代碼

二、單文件組件的文件名應該要麼始終是單詞大寫開頭 (PascalCase)，要麼始終是橫線鏈接 (kebab-case)。

（推薦）這裏所有使用kebab-case格式，主要是後面不少會使用到kebab-case格式，方便記憶。

單詞大寫開頭對於代碼編輯器的自動補全最爲友好，由於這使得咱們在 JS(X) 和模板中引用組件的方式儘量的一致。然而，混用文件命名方式有的時候會致使大小寫不敏感的文件系統的問題，這也是橫線鏈接命名一樣徹底可取的緣由。
複製代碼

三、應用特定樣式和約定的基礎組件 (也就是展現類的、無邏輯的或無狀態的組件) 應該所有以一個特定的前綴開頭，好比 Base、App 或 V。並且通常放在全局註冊，由於會被頻繁使用。

// 錯誤
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

// 正確
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
複製代碼

四、組件名中的單詞順序

組件名應該以高級別的 (一般是通常化描述的) 單詞開頭，以描述性的修飾詞結尾。

// 錯誤
components/
|- ClearSearchButton.vue
|- RunSearchButton.vue
|- SearchInput.vue

// 正確
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
複製代碼

五、在JS中的組件名大小寫

也就是在註冊組件的時候，所有使用 PascalCase 格式。

import MyComponent from './my-component.vue'

export default {
  name: 'MyComponent',
  components:{MyComponent}
}
複製代碼

六、html模板中的組件命名

對於絕大多數項目來講，在單文件組件和字符串模板中組件名應該老是 PascalCase 的——可是在 DOM 模板中老是 kebab-case 的。

也就是說，若是在模板中寫的是單標籤，使用PascalCase格式，雙標籤則使用kebab-case格式。

（推薦）不論是單標籤仍是雙標籤，所有使用 kebab-case 格式，主要是爲了方便。

<!--所有使用kebab-case格式-->
<my-component />
<my-component></my-component>
複製代碼

七、prop名稱的大小寫

在子組件html中傳入prop的爲kebab-case格式，子組件接收方採用 camelCase 格式。

// 錯誤
<welcome-message greetingText="hi"/>
    
props: {
  'greeting-text': String
}

// 正確
<welcome-message greeting-text="hi"/>
    
props: {
  greetingText: String
}    
複製代碼

八、組件事件命名

統一使用 kebab-case 格式，而且以動詞結尾。

// 正確
this.$emit('dom-resize');
this.$emit('api-load');
複製代碼

命名總結

一、採用kebab-case命名的：

• 文件夾名

• 單文件組件名

• 組件在html模板中使用（<my-component></my-component>）

• 在模板中prop傳入屬性到子組件（<my-componnet set-text="hello"/>）

• 全部事件名（this.$emit('api-reload')）

二、採用PascalCase命名：

• 公共基礎組件名（MfcSelect）

• js中components註冊組件時（import MyComponent from './my-component.vue'）

• 組件的name屬性（name: 'MyComponent'）

三、採用camelCase 命名：

• 子組件接收prop屬性

props: {
    setText: String
} 
複製代碼

Q&A

Q：爲何有些命名看起來既能夠PascalCase又能夠kebab-case的，都選擇了kebab-case？

A：由於若是有不少同時使用kebab-case的話，比較方便記憶，僅此而已。

參考連接

風格指南(官方)

Vue.js 組件編碼規範（中文）

原文連接

Vue.js命名風格指南

（啾咪 ^.< ）