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"/>
复制代码