阅读本文大概需要 8 分钟。
前言
本命名风格指南推荐了一种统一的命名规范来编写 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
格式。
importMyComponent from './my-component.vue'
exportdefault{
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-componnetset-text="hello"/>
)所有事件名(
this.$emit('api-reload')
)
2、采用 PascalCase
命名:
公共基础组件(
MfcSelect
)js中components注册组件时(
importMyComponentfrom'./my-component.vue'
)组件的name属性(
name:'MyComponent'
)
3、采用 camelCase
命名:
子组件接收prop属性
props: {
setText: String
}
Q&A
Q:为什么有些命名看起来既可以 PascalCase
又可以 kebab-case
的,都选择了 kebab-case
?
A:因为如果有很多同时使用 kebab-case
的话,比较方便记忆,仅此而已。
参考链接
风格指南(官方):https://cn.vuejs.org/v2/style-guide/
Vue.js 组件编码规范(中文):https://pablohpsilva.github.io/vuejs-component-style-guide/#/chinese
文章是最先发在掘金的,今天本来想发原创的,没想到在掘金发的文章被人抢先发在公众号了,没办法申明原创了,唉。掘金原文地址:
https://juejin.im/post/5df301786fb9a01628012f68
推荐阅读:
记得把公号加星标,会第一时间收到通知。
原创不易,如果觉得有点用,希望可以随手转发或者”在看“,拜谢各位老铁。