Vue.js命名风格指南

  • 2019 年 12 月 15 日
  • 筆記

前言

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

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

命名分类

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

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

文件夹命名

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

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

  • 文件夹
  • 单文件组件
  • 组件在html模板中使用（<my-component></my-component>）
  • 在模板中prop传入属性到子组件（<my-componnet set-text="hello"/>）
  • 所有事件名（this.$emit('api-reload')）

2、采用PascalCase命名：

  • 公共基础组件（MfcSelect）
  • js中components注册组件时（import MyComponent from './my-component.vue'）
  • 组件的name属性（name: 'MyComponent'）

3、采用camelCase 命名：

  • 子组件接收prop属性
props: {      setText: String  }

Q&A

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

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

VirMach 便宜 VPS

QNews

QNews