前端规范 - vue开发规范
data里面的数据,按模块顺序,分开书写vue2 的option对象,属性需要按顺序排列从上到下的顺序如下:不使用v-htmlv-for必须添加key不写过于复杂的表达式,使用计算属性来代替一切从简 需要加上scoped作用域在template最外层dom添加样式,style里面,将样式统一包起来。如下面代码命名与语义化如上面架构,尽可能将单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使用规范
前端规范 - 前端注释规范
前端规范 - 前端广义安全规范
前端规范 - 前后端接口规范
前端规范 - 前端项目开发规范
更多推荐
所有评论(0)