Vue相关项目需要强制使用ESlint做代码规范检查，在使用vue-cli创建项目时，选择standard规范，并且开启fix修复功能。
chainWebpack: (config) => {
config.module.rule('eslint').use('eslint-loader')
.loader('eslint-loader')
.tap(options => {
options.fix = true
return options;
})
}
项目开发
前端项目一般会使用git版本控制系统，前后端分离的项目，前端代码会跟服务端代码分开存放。提交测试服或发布正式服的时候，前端将代码编译打包后，默认生成dist文件夹，只将此文件夹上传至后端。
由于网段限制，前端的工程中一般会附带node_modules.7z的依赖压缩包，直接解压出来使用，不需要再通过npm下载，更新依赖后，也需要同步更新node_modules.7z并提交。
所以如果在某些场景下不方便安装node-sass的话，可以使用dart-sass替代。
项目开发前需要向需求方确认好浏览器版本的兼容情况，移动端需要支持到Android和iOS什么版本，是否使用的是软件自带的浏览器，内置浏览器版本是多少。
前端开发在写代码或者使用高级css功能的时候多去MDN上面查一查兼容性的问题，不能想当然地觉得这个代码特性没有兼容性问题。
项目文档
前端项目的说明，需要写道readme.md里面去，包括需要装说明软件环境，执行什么命令，配置什么host，如何打包发布。要达到的目的是，接触项目的人看这个readme就能把前端项目跑起来。
所有的项目必须有完善的readme文档说明，文档内容不做限制，除了一些必要的说明，如：如何启动项目、发版说明，只要能让开发者更好的理解项目的内容都可以加上。
前端校验
前端对所有需要用户进行输入的地方做数据校验，如检查输入长度限制、内容合法限制、xss问题等。校验规则需要跟后端一致，不合法时提示明确的错误信息。
网站字体使用
网站所使用的字体统一设置为：
font-family: PingFangSC, 微软雅黑,Helvetica,Arial,sans-serif;
禁止使用 @font-face 引用其他未被授权的中英文字体，开源免费的字体图标除外。
第三方库使用
使用第三方库时，如果只是用到了其中的少部分功能，需要注意队报进行按需加载，减少依赖体积。
例如在使用element-ui时，在main.js中
全局引入：
import ElementUI from 'element-ui'; Vue.use(ElementUI);
按需引入：
import { Button, Select } from 'element-ui';
Vue.use(Button);
Vue.use(Select);
具体引入方式可以参照element-ui官方文档。
Vue相关
Vue项目开发规范参考，Vue官方风格指南
https://cn.vuejs.org/v2/style-guide/index.html
在需要使用Vue的render函数时候，都应该使用JSX语法，不应该直接编写h(createElement)函数，统一语法，并且便于他人维护。
vue变量修改
对于数组或对象类型的数据，不能直接修改其中的元素和属性来达到触发变化的目的，需要对修改的变量复制一个副本，对副本进行修改后，复制给需要触发变化的变量中。
vue组件内的css
css规则（建议使用 css-modules 或者 BEM 命名规则（Bem 是块（block）、元素（element）、修饰符（modifier）的简写）避免样式冲突，不使用 scoped ），除非是单独的封装组件。
css-modules使用示例：
<template>
<div class="home">
<div class="item">{{ count }}</div>
</div>
</template>
<style lang="scss">
.home {
.item {
color: red;
}
}
</style>
BEM 命名约定的模式是：
.block {}
.block__element {}
.block--modifier {}
block代表了更高级别的抽象或组件。block__element代表 .block 的后代，用于形成一个完整的 .block 的整体。block--modifier代表 .block 的不同状态或不同版本。 使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。如：.sub-block__element {} .sub-block--modifier {}
BEM命名法的好处：BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。于是，通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。
<div class="article">
<div class="article__body">
<div class="tag"></div>
<button class="article__button--primary"></button>
<button class="article__button--success"></button>
</div>
</div>
v-for key的设置
不能使用index来作为key的值，必须是v-for中迭代列表中的唯一值，key的作用主要是为了高效的更新虚拟DOM。添加key之后，列表数据修改的时候，vue会去根据key值判断某个值是否修改，如果修改，则重新渲染，否则复用之前的元素。在列表中间插入一条数据时，如果使用index作为key，则vue判定插入位置到最后数据全部发生了变化，全部需要重新渲染，而如果使用唯一id作为key，则判定只有插入的一条数据发生变化，只需要渲染这一条数据。
路由划分
路由应该按照业务来划分 ，根据实际场景考虑是否按需加载页面，按需加载使用 import() 引入对应的路由组件，同时也要考虑打包形成后 chunk 的情况，chunk 太小且数量较多会导致chunk内webpack-runtime代码量增加，导致整个打包后文件体积增大，这个时候使用一种魔法注释用法
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')就可以把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
AJAX请求
发起ajax请求的 url 应该写于业务代码中，而非另开js文件进行管理。不恰当的工程化只会让代码难以维护。
1、axios.get('/test') // yes
2、axios.get(Apis.test.get) // no
公用方法
当出现重复函数时，如果该部分代码无副作用且可分离，可以考虑将其抽离出来放到单独的文件中统一管理，例如helpers、utils。谨慎使用mixins，因其来源不清晰，会极大增加后期维护成本。
git提交规范
提交代码前，对自己修改的文件进行一次检查，只对自己修改的内容进行提交，不要提交多余的文件。
css规范
缩进：使用两个空格；
分号：每个属性声明末尾都要加上分号；
空格：
不需要空格：属性名后、多个规则的分隔符 ',' 前、!important '!' 后、属性值中 '(' 后和 ')' 前、行末不要有多余的空格。
需要空格：属性值前、选择器 '>', '+', '~' 前后、'{' 前、!important '!' 前、@else前后、属性值中的 ',' 后、注释斜杠前后。
需要空行：文件最后、'}' 后最好跟一个空行，包括scss中嵌套的规则、属性之间需要适当的空行。
换行：‘{’ 前不需要换行
需要换行：'{' 后和 '}' 前、每个属性单独占一行、多个规则的分隔符 ',' 后。
命名：类名使用小写字母，以中划线分割、id采用驼峰式命名、scss中的变量、混合、placeholder采用驼峰式命名。
杂项：
不允许有空的规则；
元素选择器用小写字母；
去掉小数点前买的0；
去掉数字中不必要的小数点和后面的0；
属性值 '0' 后面不要加单位；
同个属性不同前缀的写法需要在垂直方向保持对齐；
无前缀的标准属性应该写在有前缀的属性后面；
不要在同个规则里面出现重复的属性，如果重复的属性是连续的则没有关系；
不要再一个文件里出现两个相同的规则；
用 border: 0; 代替 border: none;
选择器不要超过四层（在scss中如果超过四层应该考虑用嵌套的方式来写）；
尽量少用 ' * ' 选择器；
html
语法
缩进：两个空格；
嵌套的节点要进行缩进；
在属性上 ，使用双括号，不要使用单括号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；
不要忽略可选的关闭标签
HTML5 doctype
在页面开头使用这个简单的doctype来启用标准模式，使其在每个浏览器中尽可能一致的展示；虽然doctype不区分大小写，但是按照惯例，doctype大写（关于html属性，大写还是小写）。
<!DOCTYPE html> <html> ... </html>
lang属性
根据html5规范：应在html标签上加上lang属性，这会给语音工具和翻译工具帮助，告诉它们应该怎么去发音和翻译。
<!DOCTYPE html> <html lang="zh-cn"> ... </html>
字符编码
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为 'UTF-8'。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
</head>
...
</html>
IE兼容模式
用标签可以指定页面应该用什么版本的IE来渲染，不同doctype在不同浏览器下会触发不同的渲染模式
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>
引入css、js
根据HTML5规范，通常在引入css和js时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。
属性顺序
为保证代码易读性，属性应按照特定的顺序出现。
- class
- id
- name
- data-*
- src, for, type, href, value, max-length, max, min, pattern
- placeholder, title, alt
- aria-*, role
- required, readonly, disabled
class 是为高可复用组件设计的，所以应处于第一位；
id 更加具体且应该尽量少使用，所以应该放在第二位；
Boolean属性
Boolean属性指不需要声明取值的属性，xhtml需要每个属性声明取值，但HTML5并不需要；
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected></option>
</select>
js生成标签
在js文件中生成标签让内容变得更加难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。
减少标签数量
在编写HTML代码时，需要尽量避免多余的父节点；很多时候，需要通过迭代和重构来使HTML变得更少。
js规范
使用standard规范 https://github.com/standard/standard
对应编辑器的配置方法查看上面的 github 链接
一般情况下前端项目工程中会使用ESLint进行JS代码的规范，如果是.js文件可以支持自动修改规范的功能，.vue 文件由于编译原因无法支持。掌握本规范的最好方法是安装并在自己的代码中使用它。