一、优先级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