前言
本命名风格指南推荐了一种统一的命名规范来编写 vue.js http://vuejs.org/ 代码. 这使得代码具有如下的特性:
统一团队的命名规范, 其它开发者或是团队成员更容易上手阅读和理解.
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 的话, 比较方便记忆, 仅此而已.
参考链接
风格指南 (官方) https://cn.vuejs.org/v2/style-guide/
Vue.JS 组件编码规范 (中文)
来源: https://www.cnblogs.com/lvonve/p/12034049.html