Vue.js命名风格指南

（题图：梵高-黄房子）

---

前言

本命名风格指南推荐了一种统一的命名规范来编写 Vue.js 代码。这使得代码具备以下的特性：

• 统一团队的命名规范，其它开发者或是团队成员更容易上手阅读和理解。
• IDEs 更容易理解代码，从而提供高亮、格式化等辅助功能。
• 本指南只是我的总结概括的，仅做为一种参考。

命名分类

如今经常使用的vue命名规范无外乎四种：

• camelCase（驼峰式 ）
• kebab-case（短横线链接式）
• PascalCase（帕斯卡命名式）
• Snake（下划线链接式）

文件夹命名

若是你展开 node_modules 中的项目依赖，你会发现，几乎全部的项目文件夹命名都是 kebab-case 命名的，使用kebab-case命名的文件夹比camelCase命名的文件夹看起来更清晰。

属于components文件夹下的子文件夹，也统一使用 kebab-case 的风格。

组件命名

一、自定义组件名必须是多个单词组合的，而且是完整的单词而不是单词的缩写。

// 错误
components/
|- sd-settings.vue
|- u-prof-opts.vue

// 正确
components/
|- student-dashboard-settings.vue
|- user-profile-options.vue
复制代码

二、单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线链接 (kebab-case)。

（推荐）这里所有使用kebab-case格式，主要是后面不少会使用到kebab-case格式，方便记忆。

单词大写开头对于代码编辑器的自动补全最为友好，由于这使得咱们在 JS(X) 和模板中引用组件的方式尽量的一致。然而，混用文件命名方式有的时候会致使大小写不敏感的文件系统的问题，这也是横线链接命名一样彻底可取的缘由。
复制代码

三、应用特定样式和约定的基础组件 (也就是展现类的、无逻辑的或无状态的组件) 应该所有以一个特定的前缀开头，好比 Base、App 或 V。并且通常放在全局注册，由于会被频繁使用。

// 错误
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

// 正确
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
复制代码

四、组件名中的单词顺序

组件名应该以高级别的 (一般是通常化描述的) 单词开头，以描述性的修饰词结尾。

// 错误
components/
|- ClearSearchButton.vue
|- RunSearchButton.vue
|- SearchInput.vue

// 正确
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
复制代码

五、在JS中的组件名大小写

也就是在注册组件的时候，所有使用 PascalCase 格式。

import MyComponent from './my-component.vue'

export default {
  name: 'MyComponent',
  components:{MyComponent}
}
复制代码

六、html模板中的组件命名

对于绝大多数项目来讲，在单文件组件和字符串模板中组件名应该老是 PascalCase 的——可是在 DOM 模板中老是 kebab-case 的。

也就是说，若是在模板中写的是单标签，使用PascalCase格式，双标签则使用kebab-case格式。

（推荐）不论是单标签仍是双标签，所有使用 kebab-case 格式，主要是为了方便。

<!--所有使用kebab-case格式-->
<my-component />
<my-component></my-component>
复制代码

七、prop名称的大小写

在子组件html中传入prop的为kebab-case格式，子组件接收方采用 camelCase 格式。

// 错误
<welcome-message greetingText="hi"/>
    
props: {
  'greeting-text': String
}

// 正确
<welcome-message greeting-text="hi"/>
    
props: {
  greetingText: String
}    
复制代码

八、组件事件命名

统一使用 kebab-case 格式，而且以动词结尾。

// 正确
this.$emit('dom-resize');
this.$emit('api-load');
复制代码

命名总结

一、采用kebab-case命名的：

• 文件夹名

• 单文件组件名

• 组件在html模板中使用（<my-component></my-component>）

• 在模板中prop传入属性到子组件（<my-componnet set-text="hello"/>）

• 全部事件名（this.$emit('api-reload')）

二、采用PascalCase命名：

• 公共基础组件名（MfcSelect）

• js中components注册组件时（import MyComponent from './my-component.vue'）

• 组件的name属性（name: 'MyComponent'）

三、采用camelCase 命名：

• 子组件接收prop属性

props: {
    setText: String
} 
复制代码

Q&A

Q：为何有些命名看起来既能够PascalCase又能够kebab-case的，都选择了kebab-case？

A：由于若是有不少同时使用kebab-case的话，比较方便记忆，仅此而已。

参考连接

风格指南(官方)

Vue.js 组件编码规范（中文）

原文连接

Vue.js命名风格指南

（啾咪 ^.< ）