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檔案。