# 介绍

基于 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-ifv-for 同时用在同一个元素上。
  • 对于应用来说,顶级 app 组件和布局组件中的样式可以是全局的,但是其它所有组件都应该是有作用域的。

# 强烈推荐

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

# 推荐

  • 如果一组 v-ifv-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 样式。
最后更新时间: 2022-01-22 13:14:19