命名规范

项目命名

与后端保持一致

普通变量命名规范

• 命名方法 ：驼峰命名法
• 命名规范 ：
1. 命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的学校，那么我们可以这样定义const mySchool = "我的学校";
2. 命名是复数的时候需要加 s ,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义const names = new Array();

全局常量

·         命名方法 : 全部大写

·         命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。

const MAX_COUNT = 10
const URL = 'https://www.baidu.com/'

在方法中定义常量，使用小写

重定义this指向,统一使用

const that =this;

组件命名规范

官方文档推荐及使用遵循规则：

PascalCase (单词首字母大写命名)是最通用的声明约定

kebab-case (短横线分隔命名) 是最通用的使用约定

• 组件名应该始终是多个单词的，根组件 App 除外
• 有意义的名词、简短、具有可读性
• 自定义业务组件，以my-xxx

·         驼峰式命名，统一使用动词或者动词+名词形式

·         请求数据方法，以 data 结尾

·         init、refresh 单词除外

·         尽量使用常用单词开头（set、get、go、can、has、is）

          附： 函数方法常用的动词：

  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 聚集

views 下的文件命名

• 多个单词使用中划线
• xxx-list
• xxx-add
• xxx-detail
• xxx-edit

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case

结构化规范

目录文件夹及子文件规范

• 以下统一管理处均对应相应模块
• 以下全局文件文件均以 index.js 导出，并在 main.js 中导入
• 以下临时文件，在使用后，接口已经有了，发版后清除

src                               源码目录
|-- api                              接口，统一管理
|-- assets                           静态资源，统一管理
|-- components                       公用组件，全局文件
|-- config                           系统配置文件
|-- libs                             外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- router                           路由，统一管理
|-- store                            vuex, 统一管理
|-- views                            视图目录
|   |-- xxx-xxx                      视图模块名
|   |-- |-- xxx-xxx-list.vue         列表页面
|   |-- |-- xxx-xxx-add.vue          新增页面

vue 文件基本结构

  <template>
    <div>
      <!--必须在div中编写页面-->
    </div>
  </template>
  <script>
    export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      }，
      methods: {
      }
   }
  </script>
  <!--声明语言，并且添加scoped-->
  <style lang="scss" scoped>
  </style>

多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)

例：

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

原生属性放前面，指令放后面

  - 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

如下所示：

  - components
  - props
  - data
  - computed
  - created
  - mounted
  - metods
  - filter
  - watch

注释规范

代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明

务必添加注释列表

1. 公共组件使用说明
2. 各组件中重要函数或者类说明
3. 复杂的业务逻辑处理说明
4. 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
5. 多重 if 判断语句
6. 注释块必须以/**（至少两个星号）开头**/
7. 单行注释使用//

单行注释

注释单独一行，不要在代码后的同一行内加注释。例如：

 // 姓名
let  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>
      **/

使用 ES6 风格编码

1.     定义变量使用 let ,定义常量使用 const

2.     静态字符串一律使用单引号或反引号，动态字符串使用反引号

例：

   const a = 'foobar'
const b = `foo${a}bar`
const c = 'foobar'

1. 解构赋值

·         数组成员对变量赋值时，优先使用解构赋值

// 数组解构赋值
const arr = [1, 2, 3, 4]
const [first, second] = arr

·         函数的参数如果是对象的成员，优先使用解构赋值

     // 对象解构赋值
  function getFullName(obj) {
    const { firstName, lastName } = obj
  }
  function getFullName({ firstName, lastName }) {}

1. 拷贝数组

使用扩展运算符（...）拷贝数组。

  const items = [1, 2, 3, 4, 5]
  const itemsCopy = [...items]

1. 箭头函数

需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this

1. 模块

·         如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export default，export default 与普通的 export 不要同时使用

·         如果模块默认输出一个函数，函数名的首字母应该小写。

·         如果模块默认输出一个对象，对象名的首字母应该大写。

1. 指令有缩写一律采用缩写形式
2.  v-for 循环必须加上  key  属性，在整个  for  循环中  key  需要唯一；如果没有唯一值，使用 index
3. 避免 v-if 和 v-for 同时用在一个元素上（性能问题）         

Props 定义应该尽量详细

注释

类型

是否必传

非必传：默认值

1. 避免 this.$parent, 使用 this.$emit
2. 调试信息 console.log() debugger 使用完及时删除
3. F12中不要有报错
4. 不用的代码或者文件及时删掉（不能删的写好备注）
5. 冗余数据字测完之后删掉
6. 除特殊情况，尽量避免使用async await
7. 除了三目运算，if,else 等禁止简写
8. 调接口，捕获异常
9. 语句结束以分号结尾
10. 接口文件中url提取
11. 代码严谨（考虑到undefined、null等情况的出现）
12. 使用列表组建的的基本方法名称

CSS 规范

样式分为两种

• 全局样式放在 src/assets/css/list.less
• 单页面私有(scoped)样式

避免行内样式

样式放在.vue文件最后，即<script>后面

禁止在css中使用*选择器

class命名

• 全小写，多个单词使用中划线
• 用于js选择用的类名：.js-xxxx
• 布局的class使用前缀ly- （layout简称）
• 全局class使用前缀g-

链接（src、css、js）统一使用相对地址

css书写顺序

• 位置属性(position, top, right, z-index, display, float等) 
• 大小(width, height, padding, margin)
• 文字系列(font, line-height, letter-spacing, color- text-align等)
• 背景(background, border等)
• 其他(animation, transition等)

使用css缩写属性（padding、margin）

去掉小数点前的“0”和0后面的单位，如：0px -> 0

16进制颜色代码缩写

避免使用id

统一语义理解和命名

行为规范

1. 静态资源文件，比如静态数据字典等，统一放在在public/json下面，没有请自建
2. 静态数据字典，value值为int类型，如：

3. const dicData=[
       {
           name:“性别”,
           data:[
               {
                   value:0,
                   label:”男”
               },
               {
                   value:1,
                   label:”女”
               }
           ]
       }
   ]

4. 新增，编辑时输入框，选择两填写完整：请选择xxx，请输入xxx
5. 详情无数据时暂无数据
6. 全局加载中（保存、提交）
7. 详情、编辑等模态窗点击时添加加载中效果
8. 备注、内容、意见等使用textarea  宽100% ，至少两行
9. 地址：input 宽100%
10. 审批 ：操作按钮通过 不通过 状态：通过、不通过、审核中
11. 图标保持一致：新增、修除、删除、调入、调出、审批……
12. 不涉及到流程的按钮---确定
13. 涉及到流程的按钮---提交
14. 涉及到草稿的按钮---保存
15. 弹窗按钮统一放到右下角
16. 列表页数据显示必要的，超出点点，鼠标放上去显示数据
17. 操作按钮统一提示位置放到下面