关于vue中单文件组件的命名以及组件的name属性

关于组件的命名，官方文档上的说明是下面两种，首字母大写的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来命名。另外添加项目名的缩写作为开头，以保证唯一性。

虽然这个属性是否命名，组件照样是可以使用的。