Vue命名风格指南 |
您所在的位置:网站首页 › react文件夹命名规范 › Vue命名风格指南 |
前端队长の技术博客
前言
命名分类
文件夹命名
组件命名
命名总结
Q&A
参考链接
前言
本命名风格指南推荐了一种统一的命名规范来编写 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.vue2、单文件组件的文件名应该要么始终是单词大写开头 (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.vue4、组件名中的单词顺序 组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。 // 错误 components/ |- ClearSearchButton.vue |- RunSearchButton.vue |- SearchInput.vue // 正确 components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue5、在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 格式,主要是为了方便。 7、prop名称的大小写 在子组件html中传入prop的为 kebab-case 格式,子组件接收方采用 camelCase 格式。 // 错误 props: { 'greeting-text': String } // 正确 props: { greetingText: String }8、组件事件命名 统一使用 kebab-case 格式,并且以动词结尾。 // 正确 this.$emit('dom-resize'); this.$emit('api-load'); 命名总结1、采用kebab-case命名的: 文件夹 单文件组件 组件在html模板中使用()在模板中prop传入属性到子组件() 所有事件名(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&AQ:为什么有些命名看起来既可以PascalCase又可以kebab-case的,都选择了kebab-case? A:因为如果有很多同时使用kebab-case的话,比较方便记忆,仅此而已。 参考链接风格指南(官方) Vue.js 组件编码规范(中文) (完) This site is open source. Improve this page. |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |