一、优先级a的规则：必要的（规避错误）
1.组件名为多个单词：
组件名应该始终是多个单词的，跟组件app以及<component>之类的vue内置组件除外，这样做可以避免跟现有的以及未来的html元素相冲突，因为所有的html元素都是当单词
好例子：app.component("todo-item"，{
})
2.prop定义：
prop定义应尽量详细，在你提交的代码中，prop的定义应该尽量详细，至少需要指定其类型。
反例：
props:['status']
好例子：
props:{ status:String } //更好的例子 props:{ status:{ type:string, required:true, validator:value=>{ return [ "syncing","synved" ].includes(value) } } }
3.为v-for设置key值
总是用key配合v-for在组件上总是必须用key配合v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为。比如动画中的对象固化
4.避免v-if和v-for一起使用
永远不要把v-if和v-for同时用在同一个元素上。
一般我们在两种情况下会倾向于这样做：
为了过滤一个列表中的项目（比如 v-for="user in users" v-if="user.isActive"）.在这种情况下，请将users替换成为一个计算属性(比如 activeUsers),让其返回过滤后的列表。
为了避免渲染本改被隐藏的列表(比如 v-for="user in users" v-if="shouldShiwUsers").这种情况下请将v-if移动至容器元素上<ul v-if="shouldShowUsers">
5.为组件样式设置作用域
对于应用来说，顶级app组件和布局组件的样式可以是全局的，但是其他所有组件都应该是有作用域的。
这条规则之和单文件组件有关，你不一定要使用scoped。使用作用域也可以通过cssModules,那是一个基于class的类似bem的策略
不管怎样，对于组件库，我们应该更倾向于选用基于class的策略而不是scopd。这让腹泻内部样式更容易：使用了人类可理解的class名称且没有太高的选择器优先级，而且不太会导致冲突
好的例子：
<!-- 使用 `scoped` attribute --> <style scoped> <!-- 使用 CSS modules --> <style module> <template> <button class="c-Button c-Button--close">×</button> </template> <!-- 使用 BEM 约定 --> <style> .c-Button { border: none; border-radius: 2px; } .c-Button--close { background-color: red; } </style
6.私有property名称
使用模块作用域保持不允许外部访问的函数的私用行。如果无法做到这一点，就始终为插件，混入等不考虑作为对外公共api的自定义私有property前缀。并附带一个命名空间一回避和其他作者的冲突
二、优先级b的规则：强烈推荐（增强代码的可读性）
1、组件文件：只要有能够拼接文件的构建系统就把每个组件单独分成文件。
当你需要编辑一个组件或查询一个组件的用法时，可以快速的找到他
2.单文件组件文件的大小写
单文件组件的文件名应该要么时单词大写开头(PascalCase)，要么始终时横线链接(kebab-case)。
3.基础组件名称
应用特定样式和约定的基础组件（也就是展示的、无逻辑的或者无状态的组件）应该全部以一个特顶的前缀开头，比如base、app、v