关于组件的命名，官方文档上的说明是下面两种，首字母大写的PascalCase和使用短横线进行连接的kebab-case命名。
组件名大小写
定义组件名的方式有两种：
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
然后我就会纠结到底采用哪种命名方式比较好
看了一圈网上的答案，我的结论是，统一使用kebab-case方式
因为我写的项目用到了elementUI，所以我先翻了一下它的源码，组件的文件名，目录名是kebab-case来命名的
vue官方文档中提到，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的, 因为我把组件也当成html的标签来看待，所以采用kebab-case来命名是妥当的。 还有一个好处是在不区分大小写的系统里面kebab-case命名全是小写，不会有什么影响。
但是我们也注意到js变量名是由字母，数字，下划线，美元符号组成，所以连接符-不能进入js变量名。因此我们在js代码中使用组件的时候，采用PascalCase命名法。
举个例子，navbar.vue是导航栏组件，采用kebab-case命名，文件名字母都是小写。但是在script里面引用的时候，我们采用PascalCase命名，Navbar，首字母大写
<script>
// @ is an alias to /src
import Navbar from '@/components/navbar.vue'
export default {
name:'app',
components:{
Navbar
}
}
</script>
当我们在template里面使用组件的时候也采用kebab-case,如下
<template>
<el-container id="app">
<el-header>
<navbar/>
</el-header>
</el-container>
</template>
总结，和js代码相关的地方，使用PascalCase命名，其他地方使用kebab-case命名。
关于组件的name属性,官方文档的描述如下
name
类型：string
限制：只有作为组件选项时起作用。
详细：
允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。
指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 <AnonymousComponent>，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。
因为它属于script标签内，js代码的范围，所以我统一使用PascalCase来命名。另外添加项目名的缩写作为开头，以保证唯一性。
虽然这个属性是否命名，组件照样是可以使用的。
网友评论