万里长城第一步：Vue组件命名规则

组件的命名很简单，简单到经常让人忘记它的存在；我比较懒，翻阅了一下别人的文章，发现一共有下面几种命名方式：

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

Vue 组件命名原则

先举一个反面教材，我们来看一看：

在 components 中定义的文件名为：uploadImage，用的是驼峰式，而在 template 中又使用短横线连接式，比如说要修改一段别人写的代码，先找到了 home/index.vue，发现目标组件是 upload-image，然后直接 ctrl+p 去寻找该组件，发现找不到，那么就要去看底下引入地址是什么。当然还有一种快速找到组件的方式：就是直接双击 upload-image 标签，但是这种方式不一定总是管用的。比如说我司的整个项目有将近 50 万行的代码，这个时候双击就失效了，因为文件实在太多了，容易解析不出来。但是我优化一些命名，让模板中展示的组件明与目录中定义的组件一致，这样不就可以快速找到组件了：

当然还有一种情况就是项目中有很多命名相同的文件，这样的话虽然不能准确定位到文件，但是起码缩小了查找范围，让组件更容易辨识了

综上所述，你想用哪种命名方式就用哪种命名方式，但是前提是你在 template 中调用组件的时候必须与组件名一致，并且整个项目中采用统一风格的命名规则

Vue 组件命名与 name 属性

Vue组件都有一个 name 属性，React 组件也是如此。这个 name 用来标识组件名，比如说目录中的组件名为 upload-image ，而 name 设置为 upload，最后应用程序会以 upload 作为组件名，最直接的体现就是当使用 devtools 时的表现。如果不设置 name，那么以 components 中注册的 key 作为组件名，如果设置 name，devtools 就以 name 为组件名。 如果不注意这一点，那么你会发现 devtools 中找到的组件名可能在目录中根本搜不到，所以另一个原则就是：name 与 组件名保持一致，这样的话我心目中组件的名字与浏览器心目中组件的名字都一致了，这样非常有利于找到这个目标组件

Vue 组件命名与 eslint

Vue 组件命名还涉及到 eslint，当然 eslint 不可能去检查文件名，但是它会检查 name 属性。eslint 中有一条规则用来约束 name：vue/name-property-casing，结合前面说的：name 与 组件名、文件名保持一致，这个规则就要根据我们实际采用的命名方式来设置规则了，比如采用 kebab-case，那么规则为： 'vue/name-property-casing': ['error', 'kebab-case'],。

不过遗憾的是vue/name-property-casing的选项只有两个："PascalCase" | "kebab-case"，所以我们只能优先在这两个里面选择一个。

Vue 组件命名与web-components

由于浏览器原生支持 web-components，而 web-components 一般的命名规则是 kebab-case，所以大多数编辑器支持直接写一个短横线就能生成便签，这给 Vue 开发者带来了诸多便利。

总结

1. 让template中的组件名与组件的文件名保持一致
2. 组件的 name 属性与上面两者保持一致
3. eslint 中 vue/name-property-casing 规则设置为你当前使用的命名方式
4. web-components使用的是 kebab-case，因此生成标签会更方便
5. 整个项目的组件命名方式保持一致，不要出现多种命名方式