前言

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

• 統一團隊的命名規範，其它開發者或是團隊成員更容易上手閱讀和理解。

• IDEs 更容易理解程式碼，從而提供高亮、格式化等輔助功能。

• 本指南只是個人總結歸納的，僅作為一種參考。

命名分類

現在常用的vue命名規範無外乎四種：

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

資料夾命名

如果你展開 node_modules 中的專案依賴，你會發現，幾乎所有的專案資料夾命名都是 kebab-case 命名的，使用kebab-case

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

元件命名

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

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

// 正確
components/
|- student-dashboard-settings.vue
|- user-profile-options.vue

2、單檔案元件的檔名應該要麼始終是單詞大寫開頭 (PascalCase)，要麼始終是橫線連線 (kebab-case)。

（推薦）這裡全部使用kebab-case格式，主要是後面很多會使用到kebab-case格式，方便記憶。

單詞大寫開頭對於程式碼編輯器的自動補全最為友好，因為這使得我們在 JS(X) 和模板中引用元件的方式儘可能的一致。然而，混用檔案命名方式有的時候會導致大小寫不敏感的檔案系統的問題，這也是橫線連線命名同樣完全可取的原因。

3、應用特定樣式和約定的基礎元件 (也就是展示類的、無邏輯的或無狀態的元件) 應該全部以一個特定的字首開頭，比如 Base、App 或 V。而且一般放在全域性註冊，因為會被頻繁使用。

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

// 正確
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
 

4、元件名中的單詞順序

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

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

// 正確
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue

5、在JS中的元件名大小寫

也就是在註冊元件的時候，全部使用 PascalCase 格式。

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

export default {
  name: 'MyComponent',
  components:{MyComponent}
}

6、html模板中的元件命名

對於絕大多數專案來說，在單檔案元件和字串模板中元件名應該總是 PascalCase 的——但是在 DOM 模板中總是 kebab-case 的。

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

（推薦）不管是單標籤還是雙標籤，全部使用 kebab-case 格式，主要是為了方便。

<!--全部使用kebab-case格式-->
<my-component />
<my-component></my-component>

7、prop名稱的大小寫

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

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

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

8、元件事件命名

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

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

命名總結

1、採用kebab-case命名的：

• 資料夾
• 單檔案元件
• 元件在html模板中使用（<my-component></my-component>）

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

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

2、採用PascalCase命名：

• 公共基礎元件（MfcSelect）

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

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

3、採用camelCase 命名：

• 子元件接收prop屬性

props: {
    setText: String
} 

Q&A

Q：為什麼有些命名看起來既可以PascalCase又可以kebab-case的，都選擇了kebab-case？

A：因為如果有很多同時使用kebab-case的話，比較方便記憶，僅此而已。

參考連結

風格指南(官方)

Vue.js 元件編碼規範（中文