本文为基于vue官方风格整理的一份vue前端开发规范。
- 此规范主要目的
- 统一团队开发风格，输出高质量的代码
- 便于团队协作，提升开发效率。
- 便于后期项目维护。
1. 命名规范
1.1 普通变量 命名规范
- 命名方法：驼峰命名法
- 命名规范：
- 命名必须是跟需求相关的词，例如我们要声明一个变量表示 我的老师，我们可以这样定义
let myTeacher = "我的老师" - 命名是复数的时候，需要加s，例如当我们想声明一个数组用来表示很多朋友，我们可以这样定义
let friends = new Array()
- 命名必须是跟需求相关的词，例如我们要声明一个变量表示 我的老师，我们可以这样定义
1.2 常量 命名规范
- 命名方法：全部大写(推荐)
- 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词。
const MAX_LIMIT = 150
const URL = 'https://www.taobao.com/'
1.3 组件 命名规范
- 命名组件应遵循
PascalCase约定，也就是组件名应该始终是多个单词的(根组件App除外)，并且单词首字母应该大写。
// good
export default {
name: 'TodoItem',
// ...
}
// bad
export default {
name: 'Todo',
// ...
}
- 使用组件应遵循
kebab-case 约定，也就是在页面中使用组件，需要前后闭合，并以短线分割。
<div id="app">
<todo-item></todo-item>
</div>
1.4 method方法 命名规范
- 驼峰式命名，统一使用动词，或者动词+名词形式
//good：
jumpPage、openUserInfoDialog
//bad：
go、nextPage、show、open、login
- 请求数据方法，以data结尾
// good
getListData postFormData
// bad
getList postForm
- 尽量使用常用单词开头
set、get、open、close、jump
附：函数方法昂用的动词
get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集
1.5 views下的文件命名
- 只有一个文件的情况下不会出现文件夹，而是直接放在views目录下面，如 index.vue
- 尽量是名词，且使用驼峰命名法
例外情况：
- 作用域不大临时变量可以简写，比如：
str,num,obj,un,arr。 - 循环变量可以简写，比如：
i,j,k
2. 结构化规范
2.1 目录结构
|— build 构建脚本目录
|— build.js 生产环境构建（编译打包）脚本
|— check-versions.js 版本验证工具
|— utils.js 构建相关工具方法（主要用来处理css类文件的loader）
|— vue-loader.conf.js 处理vue中的样式
|— webpack.base.conf.js webpack基础配置
|— webpack.dev.conf.js webpack开发环境配置
|— webapck.prod.conf.js webpack生产环境配置
|— config 项目配置
|— dev.env.js 开发环境变量
|— index.js 主配置文件
|— prod.env.js 生产环境变量
|— node_modules 项目依赖模块
|— server 项目部署文件
|— src 项目源码目录
|— assets 资源目录，资源会被webpack构建
|— js 公共js文件目录
|— css 公共样式文件目录
|— images 图片存放目录
|— components 项目开发的vue组件
|— routers 前端路由目录
|— store vuex目录，定义项目状态管理
|— store.js 组装模块并导出，统一管理导出，也可命名为index.js
|— App.vue vue项目的根组件
|— main.js 入口js文件
|— static 纯静态资源
|— theme element-ui样式库
|— .babelrc babel的配置文件
|— .editorconfig 编辑器的配置文件
|— .gitignore git的忽略配置文件
|— .postcssrc.js postcss的配置文件
|— element-variables.scss element变量
|— isIe.js 判别浏览器的js文件
|— index.html html模板，项目入口页面
|— package-lock.json 项目实际安装 的各个npm package的具体来源和版本号
|— package.json npm包配置文件，依赖包信息
|— README.md 项目介绍
2.2 vue文件基本结构
<template>
<div>
<!--必须在div中编写页面，注意template下有且只能有一个根节点-->
</div>
</template>
<script>
export default {
components : {
},
data () {
return {
}
},
mounted() {
}，
methods: {
}
}
</script>
<!--声明语言，并且添加scoped-->
<style lang="scss" scoped>
</style>
2.3 多个特性的元素规范
- 多个特性的元素应该分多行撰写，每个特性一行。
<!-- good -->
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
>
<my-component
foo="a"
bar="b"
baz="c"
>
</my-component>
<!-- bad -->
< img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<my-component foo="a" bar="b" baz="c"></my-component>
- 元素特性的顺序，原生属性放前边，指令放后边
- class
- id,ref
- name
- data-*
- src, for, type, href,value,max-length,max,min,pattern
- title, alt，placeholder
- aria-*, role
- required,readonly,disabled
- is
- v-for
- key
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
- v-pre
- v-once
- v-model
- v-bind,:
- v-on,@
- v-html
- v-text
2.4 组件选项顺序
- components
- props
- data
- computed
- filter
- watch
- created
- mounted
- metods
3. UI框架选择
- PC端Vue项目UI框架：
Element UI、iView等 - 移动端Vue项目UI框架：
vant UI、vux等
4. 注释规范
- 代码注释在一个项目的后期维护中很重要，所以有必要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。
4.1 务必添加注释列表
- 公共组件使用说明
- 各个组件中重要函数或者类说明
- 复杂的业务逻辑处理说明
- 特殊情况的代码处理说明，对于代码中特殊用途的变量、存在临界值、函数中使用hack、使用了某种算法或者思路等需要进行注释描述
- 多重if判断语句
- 注释块必须以
/**(至少两个星号)开头**/ - 单行注释使用
//
4.2 单行注释
- 注释单独一行，不要在代码后的同一行内加注释。
// good
// 姓名
var name = 'abc'
// bad
var name = 'abc' //姓名
- 多行注释
组件使用说明，和调用说明
/**
* 组件名称
* @module 组件存放位置
* @desc 组件描述
* @author 组件作者
* @date 2017年12月05日17:22:43
* @param {Object} [title] - 参数说明
* @param {String} [columns] - 参数说明
* @example 调用示例
* <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
**/
5. 编码规范
- 统一的编码规范，可使代码更易于阅读，易于理解，易于维护，尽量按照
eslint格式要求编写代码
5.1 使用ES6风格编码
- 定义变量使用
let,定义常量使用const - 静态字符串一律使用 单引号或者 反引号，动态字符串用反引号
// good
const a = 'foobar'
const b = `foo${a}bar`
const c = 'foobar'
// acceptable
const c = `foobar`
// bad
const a = 'foobar'
const b = 'foo' + a + 'bar'
- 结构赋值
3.1 数组成员对变量赋值时，优先使用解构赋值
const arr = [1,2,3,4]
// good
const [first,second] = arr
// bad
const first = arr[0]
const second= arr[1]
3.2 函数参数为对象属性时，优先使用结构赋值
// 对象解构赋值
// good
function getFullName(obj) {
const { firstName, lastName } = obj
}
// best
function getFullName({ firstName, lastName }) {}
// bad
function getFullName(user) {
const firstName = user.firstName
const lastName = user.lastName
}
- 拷贝数组
const items = [1, 2, 3, 4, 5]
// good
const itemsCopy = [...items]
// bad
const itemsCopy = items
- 箭头函数
看场合尽量使用箭头函数，代码更简洁而且绑定了this
// acceptable
const boundMethod = method.bind(this);
// best
const boundMethod = (...params) => method.apply(this, params);
// bad
const self = this;
const boundMethod = function(...params) {
return method.apply(self, params);
}
- 模块
- 如果模块只有一个输出值，就使用
export default,如果模块有多个输出值，就使用export。注意export default和export不要同时使用
// 第一组
export default function crc32() { // 输出
// ...
}
import crc32 from 'crc32'; // 输入
// 第二组
export function crc32() { // 输出
// ...
};
import {crc32} from 'crc32'; // 输入
- 如果模块默认输出一个函数，则函数名首字母应小写
function addNewUser(){}
export default addNewUser;
- 如果模块默认输出一个对象，对象名的首字母应该大写
const NewUser = {
name:'...'
}
export default NewUser ;
5.2 指令规范
- 指令有语法糖，尽量采用语法糖形式
// good
:class="{'show-left'：true}"
@click="getListData"
// bad
v-bind:class="{'show-left'：true}"
v-on:click="getListData"
- v-for 必须加上key属性，并保证key值的唯一性
<!-- good -->
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
</ul>
<!-- bad -->
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
- 避免v-for和v-if同时用在一个元素上,如需要组合使用这两种指令，有2种解决方案
3.1 将数组替换为一个计算属性，让其返回过滤后的列表
<!-- bad -->
<ul>
<li v-for="user in users" v-if="user.isActive" :key="user.id">
{{ user.name }}
</li>
</ul>
<!-- good -->
<ul>
<li v-for="user in activeUsers" :key="user.id">
{{ user.name }}
</li>
</ul>
<script>
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
</script>
3.2 把v-if写在容器元素上，比如 ul,ol
<!-- bad -->
<ul>
<li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
{{ user.name }}
</li>
</ul>
<!-- good -->
<ul v-if="shouldShowUsers">
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
5.3 Props规范
- props定义应该尽量详细
// bad 这样做只有开发原型系统时可以接受
props: ['status']
// good
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
6. 异常处理规范
JavaScript本身是一个弱类型语言，项目中容易发生错误，做好网页错误监控，能帮助开发者迅速定位问题，保证线上稳定。
6.1 errorHandler： Vue 中最广泛使用的异常处理方式，是一个全局配置项，用来在全局捕获异常
/**
* 参数解析
* @err error对象
* @vm vue实例
* @info 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
**/
Vue.config.errorHandler = function(err, vm, info) {
console.error('抛出全局异常')
console.error(vm)
console.error(error)
console.error(info)
};
6.2 errorCaptured：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播
errorCaptured(err, vm, info) {
console.error('抛出组件异常')
console.error(vm)
console.error(error)
console.error(info)
return false;
}
6.3 window.onerror 是一个全局的异常处理函数，可以捕获所有的 JavaScript 异常。
/**
* 参数解析
* @message：错误消息（字符串）
* @source：引发错误的脚本的URL（字符串）
* @lineno：发生错误的行号（数值）
* @colno：发生错误的行的列号（数值）
* @error：错误对象（对象）
**/
window.onerror = function(message, source, lineno, colno, error) {};
6.4 接口异常尽量在then().catch()中处理(axios二次封装响应拦截中处理亦可)。
6.5 写代码的时候，如果变量的值是通过接口动态获取的，可以为变量准备默认值以防止接口返回错误导致的报错。也可以对变量的值或长度(比如数组)进行判断，再做后续的逻辑处理。
其他
- 调试信息
console.log(),debugger使用完及时删除 - 除了
三目运算符,if else等禁止简写
网友评论