前端规范 - vue开发规范

本规范基于 Vue.js风格指南，并在此基础上做出强调、补充
同时基于常规的html、js、css等通用前端编码规范

[强制] 必须使用vue devtools 进行辅助开发

一直以为这个工具是vue开发标配，直到认识了很多不使用这个工具的前端小伙伴
需要做到开发工具内0报错、0警告

[强制] 一切有顺序

单文件组件的顶级元素，顺序顺序为 <template>、<script>、<style>，不可变动

<script>的import顺序，分模块，拆分来写

// 首先引入npm包里的内容
import { mapState, mapActions } from 'vuex';

// 其次引入全局的一些组件、方法
import commonTree from '@/views/common/commonTree';
import { formatDate } from '@/utils/utils.js';

// 最后引入当前业务模块的组件、方法
import editUser from './coms/editUser.vue';
import handleEditDataMin from './mixins/handleEditData';

data里面的数据，按模块顺序，分开书写

data (){
  return {
	xx1,
	xx2,
	
	qq1,
	qq2
  }
}

vue2 的option对象，属性需要按顺序排列

从上到下的顺序如下：

• name
• mixins
• components
• props
• data
• filters
• directive
• computed
• watch
• 生命周期（按执行顺序）
• methods

template代码编写

不使用v-html
[强制] v-for必须添加key
不写过于复杂的表达式，使用计算属性来代替
一切从简

• 指令使用缩写，使用 :data="xx"，代替v-bind:data="xx"；使用 @click="xx"，代替 v-on:click="xx"
• 方法不传参的话，不需要写()，比如使用 @click="fn"，而不是 @click="fn()"

style代码编写

[强制] 需要加上scoped作用域
在template最外层dom添加样式，style里面，将样式统一包起来。如下面代码

<template>
  <div class="userManage">...</div>
</template>
...

<style type="scss" scoped>
  .userManage{
    ...
  }
</style>

命名与语义化

|--userManage
|----coms
|----mixins
|----userManage.vue

如上面架构，尽可能将单vue文件语义化，避免使用index.vue命名
如果有index.vue，需要配置语义化的name属性
界面内部的非通用组件，放置到当前文件夹下的coms文件夹
界面类单vue文件，使用小驼峰命名；组件类单vue文件，使用大驼峰命名

mixin使用注意

mixin文件放置mixin文件夹内，即使里面只有一个文件
只有复杂业务模块才拆分mixin，其余应当使用公用方法代替，减少mixin的使用
如果有多模块都使用的data数据，需要放置到主vue文件中

需要放到全局的通用内容

• 全局请求方法 this.$http.post(...)
• 全局接口地址对象 this.URL.getUserList)
• 必要的全局组件，比如通用表格组件
• 必要的全局过滤器，比如日期格式化过滤器、千分符过滤器
• 必要的全局自定义指令，比如控制权限的v-auth、控制按钮不可重复连续点击的防抖v-debounce

vue组件开发

prop 定义应该尽量详细，类型需要定义，必需的属性需要定义 required: true
比较复杂的组件，除了代码里面写有注释之外，需要写一下api文档，以及相关基础使用demo

父子组件传值、vuex

尽量减少使用 this.$parent、this.$ref 来进行组件传值调用
不使用eventbus之类的互相调用数据
不滥用vuex，如果数据不需要共享的话，不需要通过vuex来管理

vue router

按模块来拆分router子文件，而不是写在一个大而全的router.js文件中
同理，vuex的store也需要按模块进行拆分

单vue文件大小控制

行数红线为1000行，黄线为500行
可以通过拆分子组件、公用方法、mixin、拆出style样式等方法减少单个vue文件大小

图片引用

图片直接上oss，vue项目中，直接引入图片的cdn地址，便于打包、缓存

vscode插件配合

使用Vetur来做vue组件的格式化操作

欢迎查阅本专栏其余前端相关规范

• html css js 三驾马车 3篇
  前端规范 - html规范
  前端规范 - css规范
  前端规范 - js开发规范

• 开发框架类 1篇
  前端规范 - vue开发规范

• 开发实践类 5篇
  前端规范 - git使用规范
  前端规范 - 前端注释规范
  前端规范 - 前端广义安全规范
  前端规范 - 前后端接口规范
  前端规范 - 前端项目开发规范