Vue.js命名風格指南

  • 2019 年 12 月 15 日
  • 筆記

前言

本命名風格指南推薦了一種統一的命名規範來編寫 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的話，比較方便記憶，僅此而已。

VirMach 便宜 VPS

QNews

QNews