优先级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的不同状态或不同版本。
- 私有属性名以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 中可以。
如:
糟糕的:<my-component/>
优秀的:<my-component></my-component>
8.模版中俄组件名要么短横线要么大驼峰
9.js/jsx中的组件名应该使用大驼峰,简单的应用中可以用短横线
如
Vue.component('MyComponent', {
// ...
})
import MyComponent from './MyComponent.vue'
export default {
name: 'MyComponent',
// ...
}
10.组件名应该倾向于完整单词而不是缩写
11.在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case
12.多个特性的元素应该分多行撰写,每个特性一行。
如:
<button type="button"
@click="handleClick"
.......
.....
>
而不是<button type="button" @click="handleClick"..... ....... .......>
13.模版中的表达式应该是最简单的,复杂的表达式应该重构为计算属性和方法
14.复杂的计算属性或者方法拆分成为更简单的属性
15.非空 HTML 特性值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)。
如
<AppSidebar :style="{ width: sidebarWidth + 'px' }">
16.指令要缩写,或者要么全部缩写要么全部不缩写
优先级C的规则
1.组件/实例的选项应该有统一的顺序。
2.元素 (包括组件) 的特性应该有统一的顺序。
3.在组件/实例选项中进行空行
4但文件组件顶级元素的顺序应该是
即 <template></template>
<script></script>
<style></style>
优先D的规则(有潜在危险的)
1.在v-if. v-if-else v-else 不能缺少key
2.scoped 中不要选择元素选择器,要使用类选择器
3.父子组件通信不违反单项数据流概念,即通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或改变 prop。
4.应该优先通过vuex管理全局状态,而不是通过this. $root或一个全局事件总线。