前端队长の技术博客

  1. 前言
  2. 命名分类
  3. 文件夹命名
  4. 组件命名
  5. 命名总结
  6. Q&A
  7. 参考链接

前言

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

命名分类

现在常用的vue命名规范无外乎四种:

文件夹命名

如果你展开 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、应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 BaseAppV。而且一般放在全局注册,因为会被频繁使用。

// 错误
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命名的:

2、采用PascalCase命名:

3、采用camelCase 命名:

props: {
    setText: String
} 

Q&A

Q:为什么有些命名看起来既可以PascalCase又可以kebab-case的,都选择了kebab-case

A:因为如果有很多同时使用kebab-case的话,比较方便记忆,仅此而已。

参考链接

(完)