vue组件中的kebab/pascal/命名法，你知道么？

在程序书写中，不同的语言，不同场景，会有不同命名法。比如：

1. python中变量使用下划线链接
2. java/js 语言变量使用驼峰命名法 camel
3. 一般类都会使用大写字母开头的驼峰命名法 pascal
4. 前端css类名则会使用中横线链接 kebab

实际开发中，可能各个公司的规定是不一样的。但在vue组件中，官方有一套编程风格指南，对于组件有专门的描述：

1. 组件名应该是多个单词，这主要是考虑到组件可能直接放入到DOM中，后经过浏览器运行时去编译。这种情况下可能会于Html原生标签有冲突（是否注意到原生标签总是一个单词？）
2. 组件名一般是pascal风格的，首字母大写的驼峰。而应用到模板中可以继续保持pascal，也可以使用kebab。其实前者好处更多，后者只是为了与dom中书写保持一致。

<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>

<!-- 在 DOM 模板中 使用kebab -->
<my-component></my-component>

3. 在js当中，尽量都使用pascal风格

// js中导包
import MyComponent from './MyComponent.vue'
// js中定义组件
export default {
  name: 'MyComponent',
  // ...
}

---

最后，为了方便你记忆，帮你翻译一下这几个单词：

1. pascal 这是一门古老的编程语言，他的命名都是大写字母开头的，所以这种命名法就以该语言命名
2. camel 驼峰命名，camel本身就是骆驼的意思
3. kebab 这个很有意思，他是肉串的意思，想想中横线连接的命名法，是不是很形象？

更多详见vue的官方文档