Vue 风格编写规范

type

status

date

slug

summary

目录结构规范

目录结构保持一致，使得多人合作容易理解与管理，提高工作效率。Vue标准项目(opens new window)

简要说明

main.js主入口，router.js路由划分

plugins 自己或第三方插件,包括但不限于components、directives、filters、third lib

pages 所有路由页面。原则：轻page，重component

components 所有组件。包括原子组件、业务公用组件、页面独有组件

server api引入入口

assets sass、图片资源入口，不常修改数据

utils 工具文件夹

store 标准vuex格式，非必须

详细说明

一、实例选项顺序

在Vue中，export default对象中有很多约定的API Key。每个人的顺序排放都可能不一致，但保持统一的代码风格有助于团队成员多人协作。

Vue官网文档中也有推荐顺序 (opens new window),文档中对选项顺序做了许多分类。但从工程项目角度思考，需要更加精简以及合理的排序。推荐如下规则进行排序：

Vue扩展: extends, mixins, components

Vue数据: props, model, data, computed, watch

Vue资源: filters, directives

Vue生命周期: created, mounted, destroy...

Vue方法: methods

以下推荐顺序：

二、组件设计风格

要求 Element 元素统一使用El后缀

要求 Vue 实例统一使用VM后缀

被动接收事件方法使用on前缀

slot 只在对应名称的 class 内设置

变量命名

常见状态：default, primary, info, success, warning, error, disabled, muted, ...

大小分级：mini, small, base, large, huge, ...

颜色分级：darkest, darker, dark, base, light, lighter, lightest, ...

四、Vue-Router 编写习惯

使用路由懒加载，实现方式是结合Vue异步组件和Webpack代码分割功能。

优点：

减小包体积，提高加载速度

当页面>20个时，组件定义需要拉到编辑器顶部才知道具体路径

bad

good

import语法需要Babel添加syntax-dynamic-import插件。最新当vue-cli 3.0中默认添加该特性，不需要额外引用。另外，合理控制异步模块的数量。

文件命名

统一小写，多个单词作为文件名使用分隔符-

#紧密耦合的组件命名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名

#自闭合组件

在单文件组件中没有内容的组件应该是自闭合的

#指令缩写

用: 表示 v-bind: ，用@表示v-on

#组件数据

组件的 data 必须是一个函数,并且建议在此不使用箭头函数

#props命名

小驼峰命名。内容尽量详细，至少有默认值

#组件属性顺序和分行规则

顺序原则：重要属性放前面

顺序依据：依次指令->props属性-> 事件->dom属性(class有标记作用，除外)

分行规则：放在一行，重要内容较多时，可放置2～3行

#Vue API顺序

#Vue组件顶级标签顺序

顺序保持一致，且标签之间留有空行。template第一层级下四个空格，script和style第一层级都不加空格

#import引入顺序 `V1.1`

原则：同等类型的放一起，优先放mixins和components等UI资源。忌随意放置

#Vue 复杂data加注释/分组 `V1.1`

data数据是连接View和Modal的基础，当ViewModal复杂时，建议进行注释并分组。另外，当data过于复杂时应考虑优化重构。

#参考链接

Vue官方风格指南(opens new window)

有赞风格指南(opens new window)