前言
自古中國取名文化博大進深,往往取一個好的名字而絞盡腦汁.那麼一個好名字能夠帶來什麼呢?
- 名字的內涵必需和使用者固有的本性相配套
- 不和名人重名、不易重名、創意新穎，真正體現通過名字以區分人的作用
- 響亮上口讀起來流暢好聽，協音美好，因為聲音涵意同樣影響人，對人也有條件反射
- 易寫易記錄忌諱筆畫過於繁索
在程式中的命名又何嘗不是呢?
- 元件的命名和它的功能相配套
- 不與其他業務元件重名,讓人一眼就區分
- 不一定要好聽酷炫,但是實用.讓開發者產生條件反射,看到命名就會想到這個元件的實用場景
- 易寫易記,短小卻精煉,不繁瑣
單檔案元件的大小寫
單檔案元件要麼始終以大寫字母開頭(PascalCase)要麼始終用-連線(kebab-case)單詞大寫開頭對於程式碼編輯器的自動補全最為友好，因為這使得我們在 JS(X) 和模板中引用元件的方式儘可能的一致。然而，混用檔案命名方式有的時候會導致大小寫不敏感的檔案系統的問題，這也是橫線連線命名同樣完全可取的原因。
基礎元件命名
應用特定樣式和約定的基礎元件 (也就是展示類的、無邏輯的或無狀態的元件) 應該全部以一個特定的字首開頭，比如 Base、App 或 V。
**反例**
components/
|- button.vue
|- loading.vue
|- slide.vue
複製程式碼**正例**
components/
|- BaseButton.vue
|- BaseLoading.vue
|- BaseSlide.vue
複製程式碼單個活躍例項的元件
單個活躍例項的元件應該以 The 字首命名,以示其唯一性
這不意味著元件只可用於一個單頁面，而是每個頁面只使用一次。這些元件永遠不接受任何 prop，因為它們是為你的應用定製的，而不是它們在你的應用中的上下文。如果你發現有必要新增 prop，那就表明這實際上是一個可複用的元件，只是目前在每個頁面裡只使用一次。
**反例**
components/
|- SaleManage.vue
|- ImportExcel.vue
複製程式碼**正例**
components/
|- TheSaleManage.vue
|- TheImportExcel.vue
複製程式碼緊密耦合的元件名
和父元件緊密耦合的子元件應該以父元件的命名為字首.如果一個元件只在其父元件某個場景下有意義,這層關係應該體現在元件名上,因為編輯器通常按照首字母順序組織檔案.
**反例**
components/
|- SearchBox.vue
|- SearchItem.vue
|- SearchButton.vue
複製程式碼**正例**
components/
|- SearchBox.vue
|- SearchBoxItem.vue
|- SearchBoxButton.vue
複製程式碼元件命中的單詞順序
元件名應該以高階別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。
**反例**
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
複製程式碼**正例**
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
複製程式碼完整單詞的元件名
編輯器中的自動補全已經相當友好,讓書寫長的元件名的代價已經可以微乎其微,同樣的效率更易於理解,何樂而不為?
**反例**
components/
|- soManage.vue
|- woManage.vue
複製程式碼**正例**
components/
|- SaleOrderManage.vue
|- WorkOrderManage.vue
複製程式碼prop的大小寫
在宣告時始終採用(camelCase),在模板和 JSX 中應該始終使用( kebab-case)。
單純的遵循每個語言的約定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中則是 kebab-case。
**反例**
props: {
'greeting-text': String
}
<WelcomeMessage greetingText="hi"/>
複製程式碼**正例**
props: {
greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
複製程式碼