本规范基于 Vue.js风格指南，并在此基础上做出强调、补充
同时基于常规的html、js、css等通用前端编码规范
必须使用vue devtools 进行辅助开发
一直以为这个工具是vue开发标配，直到认识了很多不使用这个工具的前端小伙伴
需要做到开发工具内0报错、0警告
一切有顺序
单文件组件的顶级元素，顺序顺序为 <template>、<script>、<style>，不可变动
<script>的import顺序，分模块，拆分来写
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组件的格式化操作
|