vue 开发规范

命名规范

• 不使用保留字

变量

• 小驼峰
• 能描述变量内容
• 复数加s

// 我的app名称为'朝阳的百宝箱'
let myAppName = '朝阳的百宝箱'

// 我的书籍有《卓有成效的管理者》、《牧羊少年奇幻之旅》
let myBooks = [‘《卓有成效的管理者》’,‘《牧羊少年奇幻之旅》’]

常量

• 全大写
• 用_分隔单词

const MAX_NUM = 100

组件

• 首字母大写
• -分隔

在这里插入代码片

方法

• 小驼峰
• 动词，动词+名词
• 操作数据相关的方法以data结尾

getListData(){}

// 常用动词
get 获取/查询
set 设置
add 增加
del 删除
clear 清除
edit 修改
save 保存
submit 提交
publish 发布
begin 开始
end 结束
start 开始
stop 停止
bind 绑定
copy 复制
select/choose 选取/选择
mark 标记
find 查找
play 播放
pause 暂停
increase 增加
decrease 减少
init 初始化
build 构建
input 输入
output 输出
encode 编码
decode 解码
pack 打包
unpack 解包
parse 解析
connect 连接
disconnect 断开连接
send 发送
receive 接收
upload 上传
download 下载
refresh 刷新
lock 锁定
unlock 解锁
expand 展开
collapse 折叠
finish 完成
enter 进入
exit 退出

views下的文件名

• 用模块名开头

// 博客列表
blogList.vue
// 博客表单
blogForm.vue
// 博客详情
blogDetail.vue

模块输出

• 输出一个函数时，首字母小写

export default getList

• 输出一个对象时，首字母大写

let User = {
   name:'朝阳',
   say:()=>{},
   jump:()=>{},
}
export default User

目录规范

src 外目录规范

• router 路由
• store 跨组件数据共享vuex

src 内目录规范

• api 接口

• assets 静态资源

  • icons 图标
  • css 公共样式

• components 公共组件

• datas 模拟数据（接口联调后删除）

• mock 模拟接口（接口联调后删除）

• views 业务模块/页面代码

  • blog 模块名

    • blogIndex.vue 博客首页

    • components 模块内的组件

    • pages 模块内的页面

      • blogForm.vue 博客表单
      • blogDetail.vue 博客详情

选项规范

vue 选项推荐的顺序如下：

• mixin
• components
• props

// 需声明传入的变量名，数据类型，是否必传，有效性校验
props:{
  title :{
	type:String,
	required:true,
	validator:(value)=>{
	    return ['圣诞节','春节','元旦'].indexOf(value)!== -1
	}
  } 
}

• data
• computed
• watch
• methods
• filters
• created
• mounted
• destroyed

注释规范

需添加注释的内容

• 公共组件使用说明
• 重要函数/方法
• 复杂的业务逻辑
• 特殊情况的代码说明

公共组件/函数

/**
* 使用场景/功能 ：展示系统 logo
* 参数说明  
* -- src 系统logo的图片路径
* -- name 系统名称
* 调用示例
* <logo  :src='src' :name='name'   />
*/

赋值规范

数组的解构赋值

// 取出数组中的前两项
let [first,second] = [1,2,3,4]

用扩展运算符…拷贝数组

let list_copy = [...this.list]

函数参数的解构赋值

fuction getFullName(user){
   const [firstName,lastName] = user 
}