项目
1.项目名称、目录名称，文件名称（包括HTML、CSS、JS文件）全部采用kebab-case命名，即短横线命名法。
名称全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数
正例：styles / images / demo-scripts / img / doc
反例：style / image / demoStyles / imgs /docs
另外，vue项目的components和views文件夹下的vue文件单独用PascalCase格式，属于components文件夹下的子文件夹，也使用大写字母开头的PascalBase风格。
2.缩进使用4个空格（一个tab）
HTML
1.使用HTML5的文档类型申明
2.规定字符编码
3.IE兼容模式
4.doctype大写
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="UTF-8" />
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company" />
<body>
</html>
5.分块注释
在每一个块状元素，列表元素和表格元素后，加上一对HTML注释
< ! - - 英文 中文 start >
< ! - - 英文 中文 end>
<body>
<!-- header 头部 start -->
<header>
<div class="container">
<a href="#">
<img src="images/header.jpg" />
</a>
</div>
</header>
<!-- header 头部 end -->
</body>
6.优先使用 HTML5 的语义化标签，避免一个页面都是 div 或者 p 标签
7.标签属性使用双引号（ " " ）而不是单引号（ ’ ’ ）
CSS
1.类名使用小写字母，以中划线分隔
2.id采用驼峰式命名
id 和 class 的名称总是使用可以反应元素的目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称
3.scss中是变量、函数、混合、placeholder 采用驼峰式命名
4.css选择器中避免使用标签名
从结构、表现。行为分离的原则来看，应该尽量避免css中出现HTML标签，并且在css选择器中出现标签名会存在潜在的问题。
5.如果不是写很通用的，需要匹配到DOM末端的选择器，要优先使用直接子选择器，而不是后代选择器。因为滥用后代选择器可能会导致疼痛的设计问题而且有时候可能会很耗性能。
6.样式尽量使用缩写属性
不推荐
padding-top:0;
padding-bottom:2em;
padding-left:1em;
padding-right:1em;
推荐
padding: 0 1em 2em;
7.每个选择器及属性独占一行
8.省略 0 后面的单位
9.避免使用ID选择器及全局标签选择器防止污染全局样式
less规范
10.将公共less文件放置在style/less/common文件夹
11.按以下顺序组织
（1）@import
（2）变量声明
（3）样式声明
12.避免嵌套层级过多
将嵌套深度限制在3级，对于超过4级的嵌套，给予重新评估。这样可以避免出现过于详实的CSS选择器。避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现
JavaScript
1.文件名
命名均不能以下划线，也不能以下划线或美元符号结束
属于类的.js文件，使用PascalBase风格
其他类型的.js文件，使用kebab-case风格
属于api的，统一加上api后缀
2.方法名、参数名、成员变量、局部变量都统一使用lowerCamelCase（驼峰命名）风格。
常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长
其中 method方法命名必须是 动词 或者 动词+名词 形式
特此说明，增删改查和详情，统一使用如下5个单词，不得使用其他（目的是为了统一各个端）
add / update / delete / detail / get
附：函数方法常用的动词
get 获取 / set 设置
add 增加 / remove 移除
create 创建 / destory 销毁
start 启动 / stop 停止
open 打开 / close 关闭
read 读取 / write 写入
load 载入 / save 保存
begin 开始 / end 结束
backup 备份 / restore 恢复
import 导入 / export 导出
split 分割 / merge 合并
inject 注入 / extract 提取
3.语句结束分号；不能省略；据说这样子运行效率高点
4.下列关键字后必须有大括号（即使代码块的内容只有一行），if、else、for、while、do、switch、try、catch、finally、with
因为这样在以后维护的时候，或者在修改代码的时候，更加方便看懂逻辑。避免少了大括号而导致某些应该在判断条件符合的情况下执行的语句放在了外面。
5.字符串统一使用单引号
6.对象声明使用字面值创建对象
正例： let user = {
};
反例： let user = new Object();
7.必须优先使用ES6,7中新增的语法糖和函数，这将简化程序，并让代码更加灵活和可复用
8.永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串 ‘undefined’ 对变量进行判断
因为在以前的浏览器中 undefined 是一个全局变量，当修改了这个变量的名称的时候，就会导致这个判断是错误的
正例
if (typeof person === 'undefined') {
...
}
反例
if (person === undefined) {
...
}
9.条件判断和循环最多三层
条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过3层请抽成函数，并写清楚注释。
10.this的转换命名
对上下文 this 的引用只能使用 ‘self’ 来命名
11.慎用 console.log
因为 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能
vue项目规范
vue 项目规范以Vue官方规范（https://cn.vuejs.org/v2/style-guide/index.html）中的A规范为基础，在其上面进行项目开发，故所有代码均遵守改规范。请仔细阅读Vue官方规范，切记此为第一步。
组件规范
1.组件名为多个单词
组件名应该始终是多个单词组成（大于等于2），且命名规范为PascalCase格式
这样可以避免跟现有的以及未来的HTML元素相冲突，因为所有的HTML元素名称都是单个单词的
正例：
export default {
name: 'TodoItem'
// ...
};
反例：
export default {
name: 'Todo'
// ...
};
export default {
name: 'todo-item'
// ...
};
2.组件文件名统一用kebab-case格式或者PascalCase格式，这里我选择统一用PascalCase格式
正例： MyComponent.vue
3.基础组件文件名为 Base 开头，使用完整单词而不是缩写
正例：
BaseButton.vue
BaseTable.vue
反例：
MyButton.vue
VueTable.vue
4.和父组件紧密耦合的子组件应该以父组件名作为前缀命名
正例
TodoList.vue
TodoListItem.vue
TodoListItemButtom.vue
5.在Template 模板中使用组件，应使用 PascalCase 格式，并且使用自闭合组件
<!-- 在单文件组件、。字符串模板和 JSX 中 -->
<MyComponent />
6.Prop定义应该尽量详细
（1）必须使用camelCase驼峰命名
（2）必须指定类型
（3）必须加上注释，表明其含义
（4）必须加上require或者default，两者二选其一
（5）如果有业务需要，必须加上 validator 验证
正例
props:{
//组件状态，用于控制组件的颜色
status: {
type: String,
required: true,
validator: function (value) {
return [
'succ',
'info',
'error'
].indexOf(value) !== -1
}
},
//用户级别，用于显示皇冠个数
userLevel: {
type: String,
required: true
}
}
7.为组件样式设置作用域
使用 scoped 特性
8.模板中使用简单的表达式
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或者方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。
9.指令都使用缩写形式
10.标签顺序保持一致
正例
<template>...</template>
<script>...</script>
<style>...</style>
11.必须为 v-for 设置键值 key
12. v-show 与 v-if 选择
如果运行时，需要非常频繁地切换，使用v-show ； 如果在运行时，条件很少改变，使用 v-if
13 . script 标签内部结构顺序
components 》 props 》 data 》computed 》 watch 》 filter 》钩子函数（钩子函数按其执行顺序） 》methods
Vue Router 规范
14.页面跳转数据传递使用路由传参
页面跳转，例如A页面跳转到B页面，需要将A页面的数据传递到B页面，推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在B页面取出 vuex 的数据，因为如果在B页面刷新会导致vuex数据丢失，导致B页面无法正常显示数据。
正例
let id = '123';
this.$router.push({
name: 'userCenter', query: {
id: id } });
15.使用路由懒加载（延迟加载）机制
{
path: '/upload-attachment',
name: 'UploadAttachment;,
meta: {
title: '上传附件'
},
component: () => import('@/components/UploadAttachment.vue')
},
16.router 中的命名规范
path、childrenPoints 命名规范采用kebab-case 命名规范（尽量与 vue 文件的目录结构保持一致，这样很方便找到对应文件）
name命名规范采用PascalCase命名规范，和component组件名保持一致！（因为要保持keep-alive特性，keep-alive按照component的name进行缓存，所以两者必须高度保持一致）
path 除了采用kebab-case命名规范以外，必须以 / 开头，即使是children里的path也要以 / 开头。目的是，当某个页面有问题，要立刻找到这个vue文件，如果不以 / 开头，可能要在router文件里搜索多次才能找到，而如果以 / 开头，则能立刻搜索到对应的组件
Vue项目目录规范
17.vue项目中的所有命名一定要与后端命名统一。比如权限：后端 privilege,前端无论router、store、api等都必须使用 privielege 单词
18目录说明
api 所有api接口
assets 静态资源，images,icons,styles等
components 公用组件
config 配置信息
constants 常量信息，项目所有Enum，全局常量等
directives 自定义指令
filters 过滤器，全局工具
datas 模拟数据，临时存放
lib 外部引用的插件存放及修改文件
mock 模拟接口，临时存放
plugins 插件，全局使用
router 路由，统一管理
store vuex，统一管理
themes 自定义样式主题
views 视图目录
role 视图目录下role模块
role-list.vue role列表页面
role-add.vue role新建页面
index.less role模块样式
components role模块通用组件文件夹
employee 视图目录下employee模块
api目录
（1）文件、变量命名与后端保持一致
（2）此目录对应后端API接口，按照后端一个微服务或者controller 一个api.js文件，若项目较大时，可以按照业务划分子目录，并与后端保持一致
（3）api中的方法名要与后端api url 尽量保持语义高度一致
（4）对于api中的每个方法要添加注释，注释与后端swagger文档保持一致
assets目录
assets为静态资源，里面存放images、styles、icons等静态资源，静态资源命名格式为kebab-case
components目录
此目录应该按照组件进行划分，子目录命名为PascalBase格式
constants目录
此目录存放项目所有常量，如果常量在vue中使用，请使用vue-enum插件https://www.npmjs.com/package/vue-enum
router与store目录
这两个目录一定要将业务进行拆分，不能放到一个js文件里
router尽量按照views中的结构保持一致
store按照业务进行拆分不同的js文件
views目录
命名与后端、router、api等保持一致
使用kebab-case格式
注释说明
（1）公共组件使用说明
（2）api目录的接口js文件必须加注释
（3）store中的state，mutation，action等必须加注释
（4）vue文件中的template必须加注释，若文件较大添加start end 注释
（5）vue文件的methods，每个method必须添加注释
（6）vue文件的data，非常见单词要加注释
其他
（1）尽量不要手动操作DOM
因使用vue框架，所以在项目开发中尽量使用vue的数据驱动更新DOM，尽量（不到万不得已）不要手动操作DOM，包括：增删改DOM元素，以及更改样式，添加事件等
（2）删除无用代码
因为使用了git/svn等代码版本工具，对于无用代码必须及时删除。例如一些调试的console语句、无用的弃用功能代码
根据上面风格对Vue项目的配置
以下文件都是存放在Vue项目的根目录中的
.editorconfig文件，这个配置会覆盖编辑器上自定义的格式化配置（Vscode要安装EditorConfig for VS Code这个插件，该文件才能生效）
# https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
.eslintrc.js文件，这个是配置ESLint格式的
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '@vue/standard'],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
indent: [2, 4],
semi: ['error', 'always'],
'space-before-function-paren': 0
}
};
.prettierrc文件，因为上面editorconfig覆盖了编辑器里面自定义的配置，所以要加上这个来配置prettierrc插件
{
"printWidth":200,
"tabWidth":4,
"semi": true,
"singleQuote": true,
"proseWrap":"preserve",
"arrowParens":"avoid",
"trailingComma":"none"
}