vue組件命名指南,不爲取名而糾結

前言

自古中國取名文化博大進深,每每取一個好的名字而絞盡腦汁.那麼一個好名字可以帶來什麼呢?

1. 名字的內涵必需和使用者固有的本性相配套
2. 不和名人重名、不易重名、創意新穎，真正體現經過名字以區分人的做用
3. 響亮上口讀起來流暢好聽，協音美好，由於聲音涵意一樣影響人，對人也有條件反射
4. 易寫易記錄忌諱筆畫過於繁索

在程序中的命名又未嘗不是呢?

1. 組件的命名和它的功能相配套
2. 不與其餘業務組件重名,讓人一眼就區分
3. 不必定要好聽酷炫,可是實用.讓開發者產生條件反射,看到命名就會想到這個組件的實用場景
4. 易寫易記,短小卻精煉,不繁瑣

單文件組件的大小寫

單文件組件要麼始終以大寫字母開頭(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"/>
複製代碼