1.缩进：前端代码应当采用空格而非 tab 进行缩进，每次缩进为 2 个空格。
2.文件名命名规范
1）文件名称统一用小写的英文字母、数字和下划线的组合 如：node_modules(除了模块文件以外)
如：
├── systemSetting // document
│ ├── systemSetting.vue // vue
│ ├── systemSetting.js // js
│ ├── systemSetting.scss // scss
2）文件和目录使用小驼峰命名，尽量使用名词，如：eMall、validator.js
3）css文件命名：后缀.css。通用common.css，初始化base.css，首页index.css，其他页面按照对应的html命名
4）Js文件命名：英文命名，后缀.js.通用common.js，初始化base.js。 其他页面按照对应的html命
3.CSS规范
1）尽可能将所有css写在外部样式表里面。
2）不要在外部样式表里面利用@important导入其他css文件。
3）避免使用css表达式。
4）非必要情况下不要使用元素标签名和ID或者class组合
5）选择器的顺序应与元素保持一致。
6）属性声明的顺序：遵循先布局后样式，特殊地，伪类元素的content应放于最前面。参考顺序：定位→布局→盒子→尺寸→文本排版→视觉外观。
定位：position（包括top、right、bottom、left、z-index）、float、clear等；
布局：display（包括vertical-align、弹性布局的flex-direction、align-items等）、overflow等；
盒子：box-sizing、margin、padding、border等；
尺寸：width、height、line-height等；
文本排版：font、text-align、white-space等；
视觉外观：transform、color、border-radius、transition、background等；
4.CSS预处理器(scss)
1) 使用嵌套选择器，缩进2个空格
2) 变量、宏等命名, 变量、宏、继承、占位符统一使用-分隔短语，函数使用首字母小写的驼峰。例如：
$warn-color:#f30; //错误提示颜色
//文字超出一行显示省略号
%no-break {
...
}
//px转rem
@function pxToRem($px) {
...
}
3）选择器顺序遵循先结构后声明, 参考顺序：当前选择器属性 ->伪元素-> 子选择器->伪类->声明样式。
5.javaScript规范
1）变量前缀应该使用名词、名字体现所属类型的小驼峰格式命名。例如：dataType、menuVisible
2）函数前缀应该使用动词的小驼峰格式命名。常见开始单词有get（获取）、set（设置）、is（判断）、load（加载）、calc（计算）、handle（处理）。例如：isEmpty、calcAge；
3）常量使用全大写和_命名。例如：var MAX_COUNT = 10;
4）构造函数大驼峰式命名法，首字母大写。
5）类成员，公共属性和方法，跟变量和函数的命名一样；私有属性和方法，前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。
6）代码提交前去掉console、debugger。
7）使用字面量创建对象、数组
8）除需要转义的情况外，字符串统一使用单引号，例如：
console.log('hello there')
$("<div class='box'>")
9）检查 NaN 的正确姿势是使用 isNaN()
6.ES6规范
1）块级作用域使用let取代var。
2）全局常量和线程安全推荐const。
3）模块使用import取代require。
4）使用模板字符串代替字符串连接。例如：
let msg = `金额必须在${min}和${max}之内！`;
5）建议使用箭头函数
7.vue规范
1) 组件命名:使用短横线或者首字母大写方式命名。例如：
Vue.component('test-component-name',{/*......*/})
2）v-on、v-bind指定要求使用简写
8.目录结构命名规范
├── build // 构建相关
├── public // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ │ ├── systemSetting // document
│ │ │ ├── systemSetting.vue // vue
│ │ │ ├── systemSetting.js // js
│ │ │ ├── systemSetting.scss // scss
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
9.this的指向命名统一为_this;
10.接口地址统一规范为：以一个菜单栏为标准，该菜单栏下所有页面接口都放在同一个js文件。