Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Vue.js命名风格指南

Vue.js命名风格指南

作者头像
Daotin
发布于 2019-12-15 12:51:57
发布于 2019-12-15 12:51:57
1.9K00
代码可运行
举报
运行总次数:0
代码可运行

前言

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

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

命名分类

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

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

文件夹命名

如果你展开 node_modules 中的项目依赖,你会发现,几乎所有的项目文件夹命名都是 kebab-case 命名的,使用kebab-case命名的文件夹比camelCase命名的文件夹看起来更清晰。

属于components文件夹下的子文件夹,也统一使用 kebab-case 的风格。

组件命名

1、自定义组件名必须是多个单词组合的,并且是完整的单词而不是单词的缩写。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 错误
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。而且一般放在全局注册,因为会被频繁使用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 错误
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

// 正确
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

4、组件名中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 错误
components/
|- ClearSearchButton.vue
|- RunSearchButton.vue
|- SearchInput.vue

// 正确
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue

5、在JS中的组件名大小写

也就是在注册组件的时候,全部使用 PascalCase 格式。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import MyComponent from './my-component.vue'

export default {
  name: 'MyComponent',
  components:{MyComponent}
}

6、html模板中的组件命名

对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

也就是说,如果在模板中写的是单标签,使用PascalCase格式,双标签则使用kebab-case格式。

推荐)不管是单标签还是双标签,全部使用 kebab-case 格式,主要是为了方便。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--全部使用kebab-case格式-->
<my-component />
<my-component></my-component>

7、prop名称的大小写

在子组件html中传入prop的为kebab-case格式,子组件接收方采用 camelCase 格式。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 错误
<welcome-message greetingText="hi"/>
    
props: {
  'greeting-text': String
}

// 正确
<welcome-message greeting-text="hi"/>
    
props: {
  greetingText: String
}    

8、组件事件命名

统一使用 kebab-case 格式,并且以动词结尾。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 正确
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属性
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
props: {
    setText: String
} 

Q&A

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-12-13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
同在一起做一样的开发,为什么别人的工资就是高呢?这份规范指南建议收藏
不知道小伙伴们有没有感觉到,为什么我和别一做一样的开发,经验水平也都差不多,为什么别人的工资就是要比我的高,领导和同喜也都比较喜欢他呢?
用户9078190
2022/10/28
4030
最新前端Vue代码风格指南大全
参照项目命名规则,有复数结构时,要采用复数命名法。例:docs、assets、components、directives、mixins、utils、views。
江一铭
2022/06/16
3.8K0
最新前端Vue代码风格指南大全
Vue.js - 组件快速入门(上)
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树:
Vincent-yuan
2020/07/03
1.8K0
【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用 通过Vue.component
啦啦啦321
2018/01/03
1.2K0
【Vue】详解Vue组件系统
老雷PHP全栈开发教程之深入理解Vue组件
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。
老雷PHP全栈开发
2020/07/02
3380
看,官方出品了 Vue 编码风格指南
这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue,为了回避错误、小纠结和反模式,该指南是份不错的参考。
开发者技术前线
2020/11/23
1.3K0
看,官方出品了 Vue 编码风格指南
老雷uniApp教程之自定义组件
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。
老雷PHP全栈开发
2020/07/02
8460
vue项目前端规范
// 数组解构赋值 const arr = [1, 2, 3, 4] // bad const first = arr[0] const second = arr[1] // good const [first, second] = arr
薛定喵君
2020/03/30
2.7K0
vue之vue组件component整理
组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:
山行AI
2019/07/30
6.8K0
vue之vue组件component整理
【开发规范系列】(四)前端开发规范
现代软件架构的复杂性需要协同开发完成,如何高效地协同呢?无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全,试想如果没有限速,没有红绿灯,谁还敢上路行驶。对软件来说,适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化,以一种普遍认可的统一方式一起做事,提升协作效率,降低沟通成本。代码的字里行间流淌的是软件系统的血液,质量的提升是尽可能少踩坑,杜绝踩重复的坑,切实提升系统稳定性,码出质量。
程序员朱永胜
2023/09/01
8530
一篇史上最全面的 Vue 代码风格指南,建议收藏
参照项目命名规则,有复数结构时,要采用复数命名法。例:docs、assets、components、directives、mixins、utils、views。
前端达人
2021/08/10
2.1K0
Vue基础:组件--slot、异步组件、递归组件及其他
为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。Vue中使用特殊的 元素作为原始内容的插槽。
奋飛
2021/08/30
3K0
Vue多人协作开发规范统一指南
最近公司活多,好长时间没有精下心来写文章了。公司刚分配了一个活,这个活是外包过来的,项目整体结构非常差,理解起来费劲。面对这种项目只能硬着头皮上了。
程序员海军
2021/10/11
1.8K0
Vue多人协作开发规范统一指南
多人协作开发Vue统一代码风格
一般我们会直接在Prop 直接接收父组件动态绑定的key,没有类型约束,这样父组件传递任何类型数据都可以,这就存在一定的缺陷了。 eg: 例如,某个key 只能传递number类型, 你传递过来的是 string 类型, 这不就尴尬了。 // 正确做法 props: { status: { type: String, // 类型 required: true // 必填 } }
程序员海军
2021/10/10
1.2K0
多人协作开发Vue统一代码风格
关于vue的命名规范
前言:命名其实是很重要的,尤其项目越大,命名就应该越规范,要有语义化这应该是最基本的了,但是哪些地方该大写?哪里该小写?我将自己平常工作学习中在用vue的时候的一些命名规范分享一下,谈谈自己对命名的看
Ewall
2018/09/30
1.6K0
关于vue的命名规范
2020前端技术面试必备Vue:(二)组件篇
上一章已经更新了Vue基础,那么本章将更新Vue中最重要的概念--组件,会介绍到组件的使用,组件传值,插槽的使用,插槽的分类。
程序员海军
2021/10/11
6150
2020前端技术面试必备Vue:(二)组件篇
Vue的组件
本来还有几个后端知识点要看的,但是我的岗位目前办公处调到上海去了,而且被告知极有可能会做全栈开发...心情复杂... 只能赶紧看看Vue的组件,打包,脚手架问题了. 此去经年只能强大自己,拥抱变化了,上海的毒打会让我更加强壮. 关于本文,我建议如有看到我写的,建议看原版Vue手册,我写的只是整理成我自己最容易理解的方式.
名字是乱打的
2021/12/22
9790
Vue的组件
Vue父子组件的通信
Prop 是你可以在组件上注册的一些自定义 attribute。 当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。
名字是乱打的
2021/12/22
1.3K0
Vue父子组件的通信
Vue3 组件注册(2)
在通过 app.component 注册一个组件时,第一个参数是组件的名称,定义组件名的方式有两种:
玖柒的小窝
2021/10/22
7100
VUE 入门基础(8)
十,组件  使用组件   注册     可以通过以下这种方式创建一个Vue实例       new Vue({          el: '#some-element',       })     注册一个全局组件,你可以使用Vue.component(tagName,options)       Vue.component('my-component',{  })      在父实例的模块中以自定义元素 <my-component></my-component>
用户1197315
2018/01/22
1K0
相关推荐
同在一起做一样的开发,为什么别人的工资就是高呢?这份规范指南建议收藏
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验