介绍

基于 Vue.js 2.x 的中后台前端脚手架 (opens new window)、组件 (opens new window)、组件库 (opens new window)、demo (opens new window) 示例风格指南，最大程度遵守 Vue.js 提倡的写法规范。传送门 (opens new window)

提示

以下规则并非强制，初衷是为了更好的协同和提效，若有更好的建议，欢迎一起探讨

必要的

• 组件名为多个单词。
• 组件的 data 必须是一个函数。
• props 定义应该尽量详细。
• 为 v-for 设置键值。
• 永远不要把 v-if 和 v-for 同时用在同一个元素上。
• 对于应用来说，顶级 app 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。

强烈推荐

• 文件夹名、文件名、组件 name 属性定义一律小写，如果是多个单词用横杠（-）连接。
• template 里面的组件属性名、多个单词的 class 类名用横杠（-）连接，js 中的方法名、对象、属性用驼峰。
• 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
• 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
• 没有内容的组件应该是自闭合的。
• 组件名应该倾向于完整单词而不是缩写。
• 在声明 prop 和使用 prop 的时候，其命名应该始终使用 camelCase。
• 标签的 attribute 默认不换行，很多个 attribute 的元素可根据情况自行换行。
• 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
• 指令缩写 (用 : 表示 v-bind:，用 @ 表示 v-on: 和用 # 表示 v-slot:) 。

推荐

• 如果一组 v-if 和 v-else 的元素类型相同，最好使用 key (比如两个 div 元素)。
• 应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop。
• 应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线。

约定大于配置原则

• 命名最大程度遵循语义化原则。
• 标签回调的方法体如果有两个及以上执行语句重新定义一个方法。
• 标签属性对象之间不需要添加空格、属性双括号之间也不需要添加空格。
• import 与主体内容之间间隔一个空行。
• 样式优先使用在 @wytxer/style-utils 中定义过的。
• 提示和注释一律中文，无特殊情况不要中英文混用。

中后台前端脚手架 (opens new window)特有的约定规则

• 方法名以 on 开头，api 里面定义的方法，如果是查询数据以 query 开头，表单提交类以 on 开头，删除以 delete 开头。
• 页面外层使用 ak-container 组件包裹，若有内部样式一律加一个最外层的唯一class 类名。
• 禁止使用 a-form，使用 a-form-model 替换它，表单 label 不加冒号。
• 页面有数据的加载尽量添加 spin 加载状态或骨架屏组件。
• 模板库生成的页面尽量避免删减标签中已经定义的类名（尤其是 ak 开头的类名）以及 css 样式。