命名规范
- 不使用保留字
变量
- 小驼峰
- 能描述变量内容
- 复数加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 公共组件
- 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 }
