Vue官方代码规范

优先级A:基本(错误预防)

1. 使用多字组件名用户组件名应该总是多字的，除了根应用组件。这可以防止与现有和未来的HTML元素发生冲突，因为所有HTML元素都是一个单词。
2. 使用详细的道具定义。在提交的代码中，prop定义应该始终尽可能详细，指定至少一种类型。
3. 使用v-for时要注意使用key属性，在组件中使用v-for时key属性总是必须的，为了维持内部组件状态下的子树。即使对于元素来说也是一种保持可预测行为也是一种好的做法
4. 不要在相同的元素上使用v-if和v-for。
5. 组件样式要有一定范围，使用scoped。对于应用程序来说，顶级App组件和布局组件中的样式可以是全局的，但所有其他组件都应该有作用域。

优先级B规则:强烈推荐

1. 单文件组件文件名应该总是PascalCase或者总是kebab-case。PascalCase在代码编辑器中的自动补全效果最好，因为它与我们在JS(X)和模板中引用组件的方式一致，只要可能。但是，混合大小写文件名有时会在不区分大小写的文件系统上产生问题，这就是为什么kebab-case也是完全可以接受的。
2. 应用于特定程序的样式和约定的基本组件 ，组件名称都应该以特定的前缀开头，比如Base、App或V。
3. 应该只有一个活动实例的组件应该以the前缀开头，以表示只能有一个。页面只可用一次的组件加the前缀，否则可不加
4. 紧密耦合的组件名称与父组件紧密耦合的子组件应该包括父组件名作为前缀。如果一个组件只在一个父组件的上下文中有意义，那么这种关系应该在它的名称中很明显。由于编辑器通常按字母顺序组织文件，这也使这些相关文件彼此相邻。
5. 组件名称中的单词顺序。组件名称应该以最高级(通常是最通用的)单词开头，以描述性修饰词结尾。
6. 自闭组件（如：<MyComponent/>） 在单文件组件、字符串模板和JSX中，没有内容的组件应该是自闭的——但在DOM模板中绝不是这样。自封闭的组件不仅没有内容，而且注定没有内容。这是书中的空白页和标有“此页故意留白”的页之间的区别。如果没有不必要的结束标记，代码也会更干净。
7. 模板中组件名称的大小写。在大多数项目中，组件名在单文件组件和字符串模板中应该始终是PascalCase，而在DOM模板中应该是kebab-case。与kebab-case相比，PascalCase有几个优势:编辑器可以自动完成模板中的组件名，因为JavaScript中也使用了PascalCase。与<my-component>相比，<MyComponent>在视觉上与单个单词的HTML元素更有区别，因为有两个字符(两个大写字母)，而不仅仅是一个字符(连字符)。如果你在模板中使用任何非Vue自定义元素，比如web组件，PascalCase可以确保Vue组件保持明显可见。不幸的是，由于HTML的大小写不敏感，DOM模板仍然必须使用kebabcase。还要注意，如果您已经在kebab-case方面投入了大量资金，那么与HTML惯例保持一致并能够在所有项目中使用相同的大小写可能比上面列出的优势更重要。在这些情况下，到处使用kebab-case也是可以接受的。
8.  JS/JSX中组件名称的大小写。JS/JSX中的组件名应该始终是PascalCase，尽管对于只通过app.component使用全局组件注册的简单应用程序来说，它们可能在字符串中是kebar -case。
9. 组件名称应该使用全称而不是缩写。编辑器中的自动补全功能使得编写较长的名称的成本非常低，而它们提供的清晰度是无价的。特别要避免使用不常见的缩写。
10. 多属性元素具有多个属性的元素应该跨多行，每行一个属性。在JavaScript中，将具有多个属性的对象分成多行被广泛认为是一个很好的约定，因为这样更容易阅读。我们的模板和JSX值得同样的考虑。
11. 模板中的简单表达式组件模板应该只包含简单表达式，而更复杂的表达式应该重构为计算属性或方法。模板中复杂的表达式会减少它们的声明性。我们应该努力描述应该出现的东西，而不是我们如何计算这个值。计算属性和方法也允许重用代码。
12.  (: for v-bind:, @ for v-on: and # for v-slot) 用简写