vue学习笔记-vue风格指南-优先级

优先级A的规则：
1.组件名为多个单词，但是根组件除外。
如：
export default {
name:'UnitList',
}
2.组件的data 必须是一个函数
3.Prop定义应该尽量详尽，至少要指定其类型
4.为v-for设置键值，即总是用key来配合v-for
5.不要把v-for 和v-if 同时使用在同一个dom元素上
6.为组件样式设置作用域：
a.scoped
b.使用CSS Modules
c.使用BEM 约定（一种前端命名方法论，即block（块）, element（元素）,modifier(修饰符)）
命名约定模式：
.block{}
.block__element{}
.block--modifier{}

.block 代表了更高级别的抽象或组件。
.block__element 代表.block的后代，用于形成一个完整的.block的整体。
.block--modifier代表.block的不同状态或不同版本。

7. 私有属性名以yourPluginName)
   如：_myGreatMixin_update: function () {
   // ...
   }
   }
   }

优先级B的规则：
1.只要有能够拼接文件的构建系统，就把每个组件单独分成文件
如
components/TodoList.vue
components/TodoInfo.js
而不是Vue.component('TodoItem', {
// ...
})
2.但文件组件应该始终以小驼峰命名法或者短横线命名法，不要混着用
如
components/myComponent.vue
components/my-component.vue
3.基础的组件名以一个特定的前缀开头，如Basic，App,V
如
components/BasicButton.vue
4.单例组件名即每个页面只使用一次，如header和footer，应该The前缀命名，以示唯一性。
如
components/TheHeading.vue
5.紧密耦合的组件名，以父组件名作为前缀命名。
如
components/TodoListButton.vue
components/UserInfoButton.vue
6.组件名中的单词顺序，以高级别的单词开头，描述性的修饰词结尾
如
components/SearchButtonCheck
components/SearchButtonReset
7.在Dom中不要使用自闭合组件，但在单文件组件，字符串模板和 JSX 中可以。
如：
糟糕的：
优秀的：
8.模版中俄组件名要么短横线要么大驼峰
9.js/jsx中的组件名应该使用大驼峰，简单的应用中可以用短横线
如
Vue.component('MyComponent', {
// ...
})
import MyComponent from './MyComponent.vue'
export default {
name: 'MyComponent',
// ...
}
10.组件名应该倾向于完整单词而不是缩写
11.在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case
12.多个特性的元素应该分多行撰写，每个特性一行。
如：
@click="handleClick"
.......
.....
>
而不是
13.模版中的表达式应该是最简单的，复杂的表达式应该重构为计算属性和方法
14.复杂的计算属性或者方法拆分成为更简单的属性
15.非空 HTML 特性值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。
如

16.指令要缩写，或者要么全部缩写要么全部不缩写

优先级C的规则
1.组件/实例的选项应该有统一的顺序。
2.元素 (包括组件) 的特性应该有统一的顺序。
3.在组件/实例选项中进行空行
4但文件组件顶级元素的顺序应该是
即

优先D的规则（有潜在危险的）
1.在v-if. v-if-else v-else 不能缺少key
2.scoped 中不要选择元素选择器，要使用类选择器
3.父子组件通信不违反单项数据流概念，即通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop。

4.应该优先通过vuex管理全局状态，而不是通过this. $root或一个全局事件总线。