规则分为四大类：
1.必要的：
1).组件名为多个单词，
2).组件的 data 必须是一个函数，
3).Prop 定义应该尽量详细，
4).为 v-for 设置键值 必要，
5).避免-v-if-和-v-for-用在一起
6).为组件样式设置作用域
7).私有属性名使用 $_yourPluginName_)
2.强烈推荐的：
1).把每个组件单独分成文件
2).的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
3).应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、APP、v
4).和父组件紧密耦合的子组件应该以父组件名作为前缀命名
5).组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾
6).在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做
7).模板中的组件名大小写--单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
8).JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串。
9).组件名应该倾向于完整单词而不是缩写。
10).在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
11).多个特性的元素应该分多行撰写，每个特性一行。
12).组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
13).应该把复杂计算属性分割为尽可能多的更简单的属性。
14).非空 HTML 特性值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。
15).指令缩写 (用 ：表示v-bind:和用@表示v-on:)应该要么都用要么都不用。
3.推荐的
一、组件/实例的选项应该有统一的顺序。
1).副作用 (触发组件外的影响) #el
2).全局感知 (要求组件以外的知识) #name、parent
3).组件类型 (更改组件的类型) #functional
4).模板修改器 (改变模板的编译方式) #delimiters、comments
5).模板依赖 (模板内使用的资源) #components、directives、filters
6).组合 (向选项里合并属性) #extends、mixins
7).接口 (组件的接口) #inheritAttrs、model、props、propsData
8).本地状态 (本地的响应式属性) #data、computed
9).事件 (通过响应式事件触发的回调) #watch 生命周期钩子 (按照它们被调用的顺序) beforeCreate-created-beforeMount-mounted-beforeUpdate-updated-activated-deactivated-beforeDestroy-destroyed
10).非响应式的属性 (不依赖响应系统的实例属性) #methods
11).渲染 (组件输出的声明式描述) #template、render、renderError
二、 元素 (包括组件) 的特性应该有统一的顺序。
1).定义 (提供组件的选项) #is
2).列表渲染 (创建多个变化的相同元素) #v-for
3).条件渲染 (元素是否渲染/显示) #v-if、v-else-if、v-else、v-show、v-cloak
4).渲染方式 (改变元素的渲染方式) #v-pre、v-once
5).全局感知 (需要超越组件的知识) #id
6).唯一的特性 (需要唯一值的特性) #ref、key、slot
7).双向绑定 (把绑定和事件结合起来) #v-model
8).其它特性 (所有普通的绑定或未绑定的特性)
9).事件 (组件事件监听器) #v-on
10).内容 (覆写元素的内容) #v-html、v-text
三、组件/实例选项中的空行
四、单文件组件应该总是让 <script>、<template>和<style>标签的顺序保持一致。且<style>要放在最后，因为另外两个标签至少要有一个。
4.谨慎使用
1).没有在v-if / v-else-if / v-else 中使用key，如果一组v-if + v-else的元素类型相同，最好使用 key （比如两个<div>元素）
2).元素选择器(button、p、div等)应该避免在scoped中出现
3).应该优先通过prop和事件进行父子组件之间的通信，而不是 this.$parent 或改变prop
4).应该优先通过Vuex管理全局状态，而不是通过 this.$root 或一个全局事件总线
网友评论