1，通用规范

1. 缩进统一即可，不要使用 Tab 或者 Tab、空格混搭。
2. 良好的注释是非常重要的，不要让团队其它成员，来猜测一段不通用或不明显的代码。

建议添加注释的地方：
  公共组件、函数使用说明,
  接口说明，
  vuex中，store 中的 state, mutation, action，
  组件中data, 非常见单词要加注释。

3. 调试信息 console.log()、debugger使用完及时删除。
4. 代码规范

为了更好的可读性，请一行只声明一个变量。
一行代码的最大长度应该在团队层面上达成一致。通常是 80 或 120 个字符。

2，命名规范

2.1，项目命名

全部采用小写方式，以中线分割。

//正例
web-abs
//反例
helloword

2.2，目录命名

全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数。
项目目录与其项目一级导航菜单统一，便于管理，二级导航放在一级导航文件夹下，以此类推。

复数命名法：文件夹可缩写，文件尽量不缩写，变量可缩写(但需备注全称)。
原因：一个项目，目录不会很多，文件会很多，变量会更多，变量的缩写可以备注，但文件的缩写无法备注，需要让人直观的了解到文件的作用，

//正例
/center/abs/supplier/abs-page/list,


//反例
/center/abs/sup/abs_page/list',

2.3，文件命名

JS、CSS、SCSS、HTML、PNG命名，全部采用小写方式， 以中划线分隔。

//正例
@/assets/img/logo-white.png，

//反例
@/assets/img/logoWhite.png

2.4，命名注意项

1. 公共文件用common命名，例如：公共css：common.css；公共js：common.js。
2. 一些浏览器会将含有某些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以下词汇， ad、ads、adv、banner、sponsor、gg、guangg、guanggao等。

3，HTML规范

1. 属性值必须用双引号"", 避免使用中文拼音，尽量简易并要求语义化。
2. 可能减少<div>嵌套。过多嵌套（4,5层足够）：会影响网页加载速度，不利于SEO（搜索引擎优化）。
3. 在页面中尽量避免使用style属性，即style=“…”，应该尽量使用class或者id来定义新的样式，然后再对应的css文件里面修改。
4. 重要图片必须加上alt属性; 当图片不能正常显示时，则显示alt中的文字。给重要的元素和截断的元素加上title，目的：有利于SEO，搜索引擎的爬虫。
5. 一个标签内有多个属性，属性分行写，目的：提高可读性。

<!-- 正例 -->
<el-table
          :data="assetList.list"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
>
</el-table>

6. HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签。

<!--正例-->
<header></header>

<!--反例-->
<div>  <p> </p>  </div>

4，Css规范

1. 协作开发及分工。

   T根据各个模块，同时根据页面相似程序，事先写好大体框架文件, 分配给前端人员，然后由前端人员实现内部结构&表现&行为。
   共用css文件（common.css）由T书写，协作开发过程中, 每个页面请务必都要引入, 此文件包含头部底部样式, 此文件不可随意修改。

2. 规避class与id命名。

class命名采用小写字母，以中划线分割；
Id命名采用驼峰命名；
Scss中的函数、变量等使用驼峰命名。

<!-- 正例 -->
<div id="mainText" class="main-text">主体内容</div>

<!-- 反例 -->
.fs-14 {
    font-size: 14px;
}
.red {
    color: red;
}

3. 书写代码前, 考虑并提高样式重复使用率，避免重复开发。
4. CSS样式属性或者JavaScript代码后加“;”，目的：方便压缩工具“断句”。

 this.pageInfo.pageNum = 1;
 this.pageInfo.pageSize = 10;
 this.pageInfo.total = 0;

5. 尽量避免使用子选择器，如果层次关系过长，逻辑不清晰，非常不利于维护。

.kso-nav ul li a {
	width:100px;
}

6. 使用scoped关键字，约束样式生效的范围。
7. 避免使用标签选择器（效率低、损耗性能），避免使用通配符*。
8. 可以省略零（0）后面的单位。

/* 正例 */
.main {
    padding-bottom: 0;
    margin: 0;
}

/* 反例 */
.main {
    padding-bottom: 0px;
    margin: 0px;
}

5，Js规范

1. 方法名、参数名、变量名、局部变量都统一使用小驼峰命名风格。

//正例
let lowerCamelCase = 'text'

//反例
name$、name12

2. 方法命名必须是全称、尽量语义化；格式：动词+名词。

//正例
saveShopData() /openShopInfoDialog()

//反例
save()/open()

函数方法常用的动词:

1. get 获取/set 设置,
2. add 增加/remove 删除,
3. open 打开/close 关闭,
4. view 查看/browse 浏览,
5. edit 编辑/modify 修改,
6. clean 清理/clear 清除,
7. index 索引/sort 排序,
8. find 查找/search 搜索,
9. send 发送/receive 接收,
10. download 下载/upload 上传,
11. refresh 刷新/synchronize 同步,
12. submit 提交/commit 交付, save 保存，
13. enter 进入/exit 退出,

3. 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚， 不要嫌名字长。

//正例
 MAX_STOCK_COUNT
 
//反例
 MAX_COUNT

4. 使用模板字符串取代连接字符串。

//正例
this.$router.push({
     name:`/center/abs/law/asset/check/${path}`,
     query:data
});

//反例
this.$router.push({
     name:'/center/abs/law/asset/check/' + path ,
     query:data
});

5. 回调函数统一使用 Promise 函数；回调成功的参数统一为 res，错误参数为 err。
6. JS 中一致使用反引号``或单引号 ‘’ , 不使用双引号；
7. 建议利用 && 和 || 短路来简化代码：
   或运算规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值；如果第一个运算子的布尔值为false，则返回第二个运算子的值。

• 下面6种值转化为布尔值时为false，其他转化都为true：

1，undefined（未定义，找不到值时出现），
2，null（代表空值），
3，false（布尔值的false，字符串"false"布尔值为true），
4，0（数字0，字符串"0"布尔值为true），
5，NAN，（无法计算结果时出现，表示"非数值"；但是typeof NaN==="number"的值是true），
6，“双引号中无内容” 或 ‘单引号中无内容’（即空字符串，字符串中间有空格时也是true）

注意：空数组（[]）和空对象（{}）对应的布尔值，都是true。

			/*反例*/
			if(system){
                system = 'win'
                console.log("执行了——if")
            }else {
                system = 'ios'
                console.log("执行了——else")
            }
            console.log(system);  //win

			//正例
            system = 'win' || 'ios';
            console.log(system);  //win

8. 使用字面量来代替对象构造器。

//正例
let user = { age: 0, name:'king', city: '北京' };

//反例
let user = new Object();
user.age = 0;
user.name = 'king';
user,city = '北京' ;

9. 优先使用ES6+中新增的语法糖和函数。目的：简化程序，代码灵活和可复用。比如箭头函数、await/async ， 解构， let ， for…of 等等。
10. if关键字后必须有大括号（即使代码块的内容只有一行）。

//正例
if(pageNum){
	this.addPageData();
}

//反例
if(pageNum) this.addPageData();

11. 永远不要直接使用 undefined 进行变量判断，使用 typeof 和字符串’undefined’对变量进行判断。

//正例
if(typeof code === 'undefined') {
    console.log('code is undefined');
}

//反例
if(code === 'undefined') {
    console.log('code is undefined');
}

6，Vue规范

6.1，组件命名规范

1. 组件中name用英文单词，多个单词用驼峰命名法，且命名规范为KebabCase格式，尽量具有唯一性。

正例

---

反例

2. 组件文件名为pascal-case格式；文件名应该倾向于完整单词，而不是缩写；根组件 App 除外。例如abs-check，不要absche。建议：文件名尽量语义化：让阅读者易于理解，避免歧义。

//正例
import ThousandInput from '@/components/page/common/thousand-input.vue';

//反例
import  AssignDetails from  '@/components/page/center/component/assignDetails.vue';

3. 紧密耦合的父子组件命名：一般以父组件名称开头+描述性单词。

abs-list.vue
abs-list-add.vue
abs-list-edit.vue

4. 在template模版中使用组件，应使用PascalCase模式，并且使用自闭合组件。

<PactInfo
     :pjFactContractDTOList='pjFactContractDTOList'
     @PactAddChange='PactAddChange'
     @PactRemoveChange='PactRemoveChange'
     @PactUplodChange='PactUplodChange'
     @PactDeleteFileChange='PactDeleteFileChange'
     :IsSupplierShow='IsSupplierShow'
     :isAddOnePact='isAddOnePact'
></PactInfo>

6.2，组件开发规范

1. props 必须定义值类型。
2. 为v-for设置Key值。目的：遍历的每一个元素具有唯一性，这便于diff算法进行优化。
3. 使用计算 规避v-if和v-for用在一起。v-for优先级比v-if高，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）。
4. 组件script标签内部结构顺序：

//正例
components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods

5. 无特殊情况不允许使用原生API操作dom，谨慎使用this.$refs直接操作dom。
   操作DOM是及其损耗性能得，
代码的质量会降低，出现一些多余得代码，
经常直接操作DOM 会导致一些不可预测得问题，当你在一个组件当中直接操作全局得DOM时，有可能会影响到其他页面，一旦报错，定位问题会比较困难。
6. 使用ES6风格编码源码,
   定义变量使用let，
定义常量使用const（只能被赋值一次）,
使用export,import模块化，优先使用箭头函数。
目的：避免1个变量可以使用两次var（重声明）；
7. 函数中统一使用self=this来解决全局指向问题。
8. 尽量使用===。
9. 声明变量必须赋值。
10. 指定都用指令缩写（用 : 表示 v-bind: 和用 @ 表示 v-on:）。
11. 弹框、select等需要大量代码去实现，要以组件的方式引入。
12. 【推荐】应该把复杂计算属性分割为尽可能多的更简单的属性。
13. 组件内css样式彻底模块化（即我的规则影响不了别人，别人的规则也影响不了我）。

6.3，路由规范

1. 路由中，path命名，尽量与组件名相匹配（即一眼看到 path 就能迅速找到对应的组件）。
   
2. 页面跳转数据传递使用路由参数。

  页面跳转传参：
  例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，使用路由参数进行传参；而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据。
  因为如果在B页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。

3. 使用路由懒加载（延迟加载）机制

懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

{
  path: 'abs/list',
  name:'/center/abs/member/abs/list',
  //懒加载
  component: resolve => require(['@/components/page/center/abs/member/abs/list'],resolve),
   meta: { permission: true, prodCode: 'ABS' }
},

4. 视图跳转能用声明式就用声明式。
   
5. 导入模块时不要省略后缀（js 除外），这样有利于 IDE 感知（特别是 .vue）。
6. 导入当前目录以外的模块时，建议使用’@'别名。
   
7. 严格遵守 ESLint 语法校验，警告级别的也要处理 (暂时用不到的代码可以先注释掉)。