本规范基于 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.$parentthis.$ref 来进行组件传值调用
不使用eventbus之类的互相调用数据
不滥用vuex,如果数据不需要共享的话,不需要通过vuex来管理

vue router

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

单vue文件大小控制

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

图片引用

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

vscode插件配合

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

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

Logo

前往低代码交流专区

更多推荐