前端代码规范 ​

编程规约 ​

命名规范 ​

项目命名 ​

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

目录命名 ​

全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数。

JS、CSS、SCSS、HTML、PNG文件命名 ​

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

命名严谨性 ​

代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。 正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用

CSS规范 ​

命名 ​

• 类名使用小写字母，以中划线分隔
• id采用驼峰式命名
• scss中的变量、函数、混合、placeholder采用驼峰式命名

id和class的名称总是使用可以反应元素目的和用途的名称,或其他通用的名称,代替表象和晦涩难懂的名称。

.heavy {
   font-weight: 800;
}
.important { 
   color: red; 
}

.fw-800 {
   font-weight: 800;
}
.red {
   color: red; 
}

选择器 ​

• css选择器中避免使用标签名

从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。

• 使用直接子选择器

很多前端开发人员写选择器链的时候不使用 直接子选择器 (注: 直接子选择器和后代选择器的区别)。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况7这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器，你应该总是考虑直接子选择器

.content > .title {
   font-size: 2rem;
}

.content .title {
   font-size: 2rem;
}

尽量使用缩写属性 ​

border-top: 0; 
font: 100%/1.6 palatino, georgia, serif; 
padding: 0 1em 2em;

border-top-style: none; 
font-family: palatino, georgia, serif; 
font-size: 100%; line-height: 1.6; 
padding-bottom: 2em; 
padding-left: 1em;
padding-right: 1em; 
padding-top: 0;

每个选择器及属性独占一行 ​

button { 
  width: 100px; 
  height: 50px;
  color: #fff;
  background: #00a0e9;
}

button {
  width: 100px; height: 50px;
  color: #fff;
  background: #00a0e9; 
}

省略 0 后面的单位 ​

div {
   padding-bottom: 0; 
   margin: 0; 
}

div {
   padding-bottom: 0px; 
   margin: 0em;
}

避免使用 ID 选择器及全局标签选择器防止污染全局样式 ​

.header { 
  padding-bottom: 0px; 
  margin: 0em; 
}

#header {
  padding-bottom: 0px; 
  margin: 0em;
}

Javascript 规范 ​

命名 ​

• 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线， 也不能以下划线或美元符号结束

• 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风 格，必须遵从驼峰形式

• method 方法命名必须是 动词 或者 动词+名词 形式

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

代码格式 ​

• 使用 2 个空格进行缩进
• 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以 提升可读性
• 统一使用单引号( ' )，不使用双引号( " )。这在创建HTML字符串非常有好处

对象声明 ​

• 使用字面值创建对象
• 使用字面量来代替对象构造器

let user = {};

var user = { age: 0, name: 1, city: 3 };

let user = new Object();

var user = new Object(); 
user.age = 0; 
user.name = 0; 
user.city = 0;

使用 ES6+ ​

必须优先使用 ES6+ 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。比如箭头函数、await/async ， 解构，let ， for...of 等等

Vue 项目规范 ​

Vue 编码基础 ​

vue 项目规范以 Vue 官方 中的组合式API为基础，在其上面进行项目开发，故所有代码均遵守该规范。 请仔仔细细阅读 Vue 官方规范，切记，此为第一步。

组件规范 ​

• 组件名为多个单词。

export default {
  name: 'TodoItem'
  // ...
};

export default {
  name: 'Todo',
  // ...
}
export default {
  name: 'todo-item',
  // ...
}

• 组件文件名为 pascal-case 格式

• 基础组件文件名为 base 开头，使用完整单词而不是缩写。

• 和父组件紧密耦合的子组件应该以父组件名作为前缀命名

• 在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。

<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent />
<Row><table :column="data"/></Row>

<my-component /> <row><table :column="data"/></row>

• 为组件样式设置作用域

<template>
  <button class="btn btn-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
  .btn-close {
    background-color: red;
  }
</style>

<template>
  <button class="btn btn-close">X</button>
</template>
<!-- 没有使用 `scoped` 特性 -->
<style>
  .btn-close {
    background-color: red;
  }
</style>

指令都使用缩写形式 ​

指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)

必须为 v-for 设置键值 key ​

v-show 与 v-if 选择 ​

如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。

Vue 项目目录规范 ​

基础 ​

vue 项目中的所有命名一定要与后端命名统一。 比如权限：后端 privilege, 前端无论 router , store, api 等都必须使用 privielege 单词！

api 目录 ​

文件、变量命名要与后端保持一致。 此目录对应后端 API 接口，按照后端一个 controller 一个 api js 文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致。 api 中的方法名字要与后端 api url 尽量保持语义高度一致性。 对于 api 中的每个方法要添加注释，注释与后端 swagger 文档保持一致。

/employee/add
/employee/delete/{id}
/employee/update

// 添加员工
  addEmployee: (data) => {
    return postAxios('/employee/add', data)
  },
  // 更新员工信息
  updateEmployee: (data) => {
    return postAxios('/employee/update', data)
  },
  // 删除员工
  deleteEmployee: (employeeId) => {
    return postAxios('/employee/delete/' + employeeId)
  },

router 与 store 目录 ​

这两个目录一定要将业务进行拆分，不能放到一个 js 文件里。 router 尽量按照 views 中的结构保持一致 store 按照业务进行拆分不同的 js 文件