前端开发规范

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文件。