前言
本命名風格指南推薦了一種統一的命名規范來編寫 Vue.js 代碼。這使得代碼具有如下的特性：
-
統一團隊的命名規范，其它開發者或是團隊成員更容易上手閱讀和理解。
-
IDEs 更容易理解代碼，從而提供高亮、格式化等輔助功能。
-
本指南只是個人總結歸納的，僅作為一種參考。
命名分類
現在常用的vue命名規范無外乎四種：
camelCase（駝峰式 ）kebab-case（短橫線連接式）PascalCase（帕斯卡命名式）Snake（下划線連接式）
文件夾命名
如果你展開 node_modules 中的項目依賴，你會發現，幾乎所有的項目文件夾命名都是 kebab-case 命名的，使用kebab-case命名的文件夾比camelCase命名的文件夾看起來更清晰。
屬於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的話，比較方便記憶，僅此而已。