規範的目的是爲了編寫高質量的代碼，讓你的團隊成員每天得心情都是愉悅的，大家在一起是快樂的。

引自《阿里規約》的開頭片段：

----現代軟件架構的複雜性需要協同開發完成，如何高效地協同呢？無規矩不成方圓，無規範難以協同，比如，制訂交通法規表面上是要限制行車權，實際上是保障公衆的人身安全，試想如果沒有限速，沒有紅綠燈，誰還敢上路行駛。對軟件來說，適當的規範和標準絕不是消滅代碼內容的創造性、優雅性，而是限制過度個性化，以一種普遍認可的統一方式一起做事，提升協作效率，降低溝通成本。代碼的字裏行間流淌的是軟件系統的血液，質量的提升是儘可能少踩坑，杜絕踩重複的坑，切實提升系統穩定性，碼出質量。

一、編程規約

(一)命名規範

1.1.1 項目命名

全部採用小寫方式，以中劃線分隔。

正例：mall-management-system

反例：mall_management-system / mallManagementSystem

1.1.2 目錄命名

全部採用小寫方式，以中劃線分隔，有複數結構時，要採用複數命名法，縮寫不用複數

正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

反例： script / style / demo_scripts / demoStyles / imgs / docs

【特殊】VUE 的項目中的 components 中的組件目錄，使用 kebab-case 命名

正例： head-search / page-loading / authorized / notice-icon

反例： HeadSearch / PageLoading

【特殊】VUE 的項目中的除 components 組件目錄外的所有目錄也使用 kebab-case 命名
正例： page-one / shopping-car / user-management

反例： ShoppingCar / UserManagement

1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名

全部採用小寫方式，以中劃線分隔

正例： render-dom.js / signup.css / index.html / company-logo.png

反例： renderDom.js / UserManagement.html

1.1.4 命名嚴謹性

代碼中的命名嚴禁使用拼音與英文混合的方式，更不允許直接使用中文的方式。說明：正確的英文拼寫和語法可以讓閱讀者易於理解，避免歧義。注意，即使純拼音命名方式也要避免採用

正例：henan / luoyang / rmb 等國際通用的名稱，可視同英文。

反例：DaZhePromotion [打折] / getPingfenByName() [評分] / int 某變量 = 3

杜絕完全不規範的縮寫，避免望文不知義：

反例：AbstractClass“縮寫”命名成 AbsClass；condition“縮寫”命名成 condi，此類隨意縮寫嚴重降低了代碼的可閱讀性。

(二)HTML 規範（Vue Template 同樣適用）

1.2.1 HTML 類型

推薦使用 HTML5 的文檔類型申明： .
（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應用支持與優化空間都十分有限）。

規定字符編碼
IE 兼容模式
規定字符編碼
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>

1.2.2 縮進

縮進使用 2 個空格（一個 tab）

嵌套的節點應該縮進。

1.2.3 分塊註釋

在每一個塊狀元素，列表元素和表格元素後，加上一對 HTML 註釋。註釋格式

<!-- 英文中文 start >

<!-- 英文中文 end >
正例：

<body>
  <!-- header 頭部 start -->
  <header>
    <div class="container">
      <a href="#">
        <!-- 圖片會把a標籤給撐開，所以不用設置a標籤的大小 -->
        <img src="images/header.jpg" />
      </a>
    </div>
  </header>
  <!-- header 頭部 end -->
</body>

1.2.4 語義化標籤

HTML5 中新增很多語義化標籤，所以優先使用語義化標籤，避免一個頁面都是 div 或者 p 標籤

正例

<header></header>
<footer></footer>

反例

<div>
  <p></p>
</div>

1.2.5 引號

使用雙引號(" ") 而不是單引號(' ') 。

正例： <div class="news-div"></div>

反例： <div class='news-div'></div>

(三) CSS 規範

1.3.1 命名

類名使用小寫字母，以中劃線分隔
id 採用駝峯式命名
scss 中的變量、函數、混合、placeholder 採用駝峯式命名

ID 和 class 的名稱總是使用可以反應元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱

不推薦：

.fw-800 {
  font-weight: 800;
}

.red {
  color: red;
}

1.3.2 選擇器

1)css 選擇器中避免使用標籤名
從結構、表現、行爲分離的原則來看，應該儘量避免 css 中出現 HTML 標籤，並且在 css 選擇器中出現標籤名會存在潛在的問題。

2)很多前端開發人員寫選擇器鏈的時候不使用直接子選擇器（注：直接子選擇器和後代選擇器的區別）。有時，這可能會導致疼痛的設計問題並且有時候可能會很耗性能。然而，在任何情況下，這是一個非常不好的做法。如果你不寫很通用的，需要匹配到 DOM 末端的選擇器，你應該總是考慮直接子選擇器。

不推薦:

.content .title {
  font-size: 2rem;
}

1.3.3 儘量使用縮寫屬性

不推薦：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推薦：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

1.3.4 每個選擇器及屬性獨佔一行

不推薦：

button{
  width:100px;height:50px;color:#fff;background:#00a0e9;
}

推薦：

button{
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}

1.3.5 省略0後面的單位

不推薦：

div{
  padding-bottom: 0px;
  margin: 0em;
}

推薦：

div{
  padding-bottom: 0;
  margin: 0;
}

1.3.6 避免使用ID選擇器及全局標籤選擇器防止污染全局樣式

不推薦：

#header{
  padding-bottom: 0px;
  margin: 0em;
}

推薦：

.header{
  padding-bottom: 0px;
  margin: 0em;
}

(四) LESS 規範

1.4.1 代碼組織

1)將公共less文件放置在style/less/common文件夾

例:// color.less,common.less

2)按以下順序組織

1、@import;
2、變量聲明;
3、樣式聲明;

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
}

1.4.2 避免嵌套層級過多

將嵌套深度限制在3級。對於超過4級的嵌套，給予重新評估。這可以避免出現過於詳實的CSS選擇器。
避免大量的嵌套規則。當可讀性受到影響時，將之打斷。推薦避免出現多於20行的嵌套規則出現

不推薦：

.main{
  .title{
    .name{
       color:#fff
    }
  }
}

推薦：

.main-title{
   .name{
      color:#fff
   }
}

(五) Javascript 規範

1.5.1 命名

1) 採用小寫駝峯命名 lowerCamelCase，代碼中的命名均不能以下劃線，也不能以下劃線或美元符號結束

反例： _name / name_ / name$

2) 方法名、參數名、成員變量、局部變量都統一使用 lowerCamelCase 風格，必須遵從駝峯形式。

正例： localValue / getHttpMessage() / inputUserId

**其中 method 方法命名必須是動詞或者動詞+名詞形式**

正例：saveShopCarData /openShopCarInfoDialog

反例：save / open / show / go

**特此說明，增刪查改，詳情統一使用如下 5 個單詞，不得使用其他（目的是爲了統一各個端）**

add / update / delete / detail / get

附：函數方法常用的動詞:

get 獲取/set 設置,
add 增加/remove 刪除
create 創建/destory 移除
start 啓動/stop 停止
open 打開/close 關閉,
read 讀取/write 寫入
load 載入/save 保存,
create 創建/destroy 銷燬
begin 開始/end 結束,
backup 備份/restore 恢復
import 導入/export 導出,
split 分割/merge 合併
inject 注入/extract 提取,
attach 附着/detach 脫離
bind 綁定/separate 分離,
view 查看/browse 瀏覽
edit 編輯/modify 修改,
select 選取/mark 標記
copy 複製/paste 粘貼,
undo 撤銷/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 減少
play 播放/pause 暫停,
launch 啓動/run 運行
compile 編譯/execute 執行,
debug 調試/trace 跟蹤
observe 觀察/listen 監聽,
build 構建/publish 發佈
input 輸入/output 輸出,
encode 編碼/decode 解碼
encrypt 加密/decrypt 解密,
compress 壓縮/decompress 解壓縮
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 連接/disconnect 斷開,
send 發送/receive 接收
download 下載/upload 上傳,
refresh 刷新/synchronize 同步
update 更新/revert 復原,
lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展開/collapse 摺疊
begin 起始/end 結束,
start 開始/finish 完成
enter 進入/exit 退出,
abort 放棄/quit 離開
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集

3) 常量命名全部大寫，單詞間用下劃線隔開，力求語義表達完整清楚，不要嫌名字長。

正例： MAX_STOCK_COUNT

反例： MAX_COUNT

1.5.2 代碼格式

1) 使用 2 個空格進行縮進

正例：

if (x < y) {
  x += 10;
} else {
  x += 1;
}

2) 不同邏輯、不同語義、不同業務的代碼之間插入一個空行分隔開來以提升可讀性。

說明：任何情形，沒有必要插入多個空行進行隔開。

1.5.3 字符串

統一使用單引號(‘)，不使用雙引號(“)。這在創建 HTML 字符串非常有好處：

正例:

let str = 'foo';
let testDiv = '<div id="test"></div>';

反例:

let str = 'foo';
let testDiv = "<div id='test'></div>";

1.5.4 對象聲明

1)使用字面值創建對象

正例： let user = {};

反例： let user = new Object();

2) 使用字面量來代替對象構造器

正例：

var user = {
  age: 0,
  name: 1,
  city: 3
};

反例：

var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;

1.5.5 使用 ES6,7

必須優先使用 ES6,7 中新增的語法糖和函數。這將簡化你的程序，並讓你的代碼更加靈活和可複用。

必須強制使用 ES6, ES7 的新語法，比如箭頭函數、await/async ，解構， let ， for...of 等等

1.5.6 括號

下列關鍵字後必須有大括號（即使代碼塊的內容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

正例：

if (condition) {
  doSomething();
}

反例：

if (condition) doSomething();

1.5.7 undefined 判斷

永遠不要直接使用 undefined 進行變量判斷；使用 typeof 和字符串'undefined'對變量進行判斷。

正例：

if (typeof person === 'undefined') {
    ...
}

反例：

if (person === undefined) {
    ...
}

1.5.8 條件判斷和循環最多三層

條件判斷能使用三目運算符和邏輯運算符解決的，就不要使用條件判斷，但是謹記不要寫太長的三目運算符。如果超過 3 層請抽成函數，並寫清楚註釋。

1.5.9 this 的轉換命名

對上下文 this 的引用只能使用'self'來命名

1.5.10 慎用 console.log

因 console.log 大量使用會有性能問題，所以在非 webpack 項目中謹慎使用 log 功能

二、Vue 項目規範

(一) Vue 編碼基礎

vue 項目規範以 Vue 官方規範（https://cn.vuejs.org/v2/style-guide/）中的 A 規範爲基礎，在其上面進行項目開發，故所有代碼均遵守該規範。

請仔仔細細閱讀 Vue 官方規範，切記，此爲第一步。

2.1.1. 組件規範

1) 組件名爲多個單詞。

組件名應該始終是多個單詞組成（大於等於 2），且命名規範爲KebabCase格式。
這樣做可以避免跟現有的以及未來的 HTML 元素相沖突，因爲所有的 HTML 元素名稱都是單個單詞的。

正例：

export default {
  name: 'TodoItem'
  // ...
};

反例：

export default {
  name: 'Todo',
  // ...
}
export default {
  name: 'todo-item',
  // ...
}

2) 組件文件名爲 pascal-case 格式

正例：

components/
|- my-component.vue

反例：

components/
|- myComponent.vue
|- MyComponent.vue

3) 基礎組件文件名爲 base 開頭，使用完整單詞而不是縮寫。

正例：

components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue

反例：

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

4) 和父組件緊密耦合的子組件應該以父組件名作爲前綴命名

正例：

components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整單詞）

反例：

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了縮寫）

5) 在 Template 模版中使用組件，應使用 PascalCase 模式，並且使用自閉合組件。

正例：

<!-- 在單文件組件、字符串模板和 JSX 中 -->
<MyComponent />
<Row><table :column="data"/></Row>

反例：

<my-component /> <row><table :column="data"/></row>

6) 組件的 data 必須是一個函數

當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數。因爲如果直接是一個對象的話，子組件之間的屬性值會互相影響。

正例：

export default {
  data () {
    return {
      name: 'jack'
    }
  }
}

反例：

export default {
  data: {
    name: 'jack'
  }
}

7) Prop 定義應該儘量詳細

必須使用 camelCase 駝峯命名
必須指定類型
必須加上註釋，表明其含義
必須加上 required 或者 default，兩者二選其一
如果有業務需要，必須加上 validator 驗證

正例：

 props: {
  // 組件狀態，用於控制組件的顏色
   status: {
     type: String,
     required: true,
     validator: function (value) {
       return [
         'succ',
         'info',
         'error'
       ].indexOf(value) !== -1
     }
   },
    // 用戶級別，用於顯示皇冠個數
   userLevel：{
      type: String,
      required: true
   }
}

8) 爲組件樣式設置作用域

正例：

<template>
  <button class="btn btn-close">X</button>
</template>

<!-- 使用 `scoped` 特性 -->
<style scoped>
  .btn-close {
    background-color: red;
  }
</style>

反例：

<template>
  <button class="btn btn-close">X</button>
</template>
<!-- 沒有使用 `scoped` 特性 -->
<style>
  .btn-close {
    background-color: red;
  }
</style>

9) 如果特性元素較多，應該主動換行。

正例：

<MyComponent foo="a" bar="b" baz="c"
    foo="a" bar="b" baz="c"
    foo="a" bar="b" baz="c"
 />

反例：

<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c"/>

2.1.2. 模板中使用簡單的表達式

組件模板應該只包含簡單的表達式，複雜的表達式則應該重構爲計算屬性或方法。複雜表達式會讓你的模板變得不那麼聲明式。我們應該儘量描述應該出現的是什麼，而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。

正例：

<template>
  <p>{{ normalizedFullName }}</p>
</template>

// 複雜表達式已經移入一個計算屬性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

反例：

<template>
  <p>
       {{
          fullName.split(' ').map(function (word) {
             return word[0].toUpperCase() + word.slice(1)
           }).join(' ')
        }}
  </p>
</template>

2.1.3 指令都使用縮寫形式

指令推薦都使用縮寫形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)

正例：

<input
  @input="onInput"
  @focus="onFocus"
>

反例：

<input
  v-on:input="onInput"
  @focus="onFocus"
>

2.1.4 標籤順序保持一致

單文件組件應該總是讓標籤順序保持爲 <template> 、<script>、 <style>

正例：

<template>...</template>
<script>...</script>
<style>...</style>

反例：

<template>...</template>
<style>...</style>
<script>...</script>

2.1.5 必須爲 v-for 設置鍵值 key

2.1.6 v-show 與 v-if 選擇

如果運行時，需要非常頻繁地切換，使用 v-show ；如果在運行時，條件很少改變，使用 v-if。

2.1.7 script 標籤內部結構順序

components > props > data > computed > watch > filter > 鉤子函數（鉤子函數按其執行順序） > methods

2.1.8 Vue Router 規範

1) 頁面跳轉數據傳遞使用路由參數

頁面跳轉，例如 A 頁面跳轉到 B 頁面，需要將 A 頁面的數據傳遞到 B 頁面，推薦使用路由參數進行傳參，而不是將需要傳遞的數據保存 vuex，然後在 B 頁面取出 vuex 的數據，因爲如果在 B 頁面刷新會導致 vuex 數據丟失，導致 B 頁面無法正常顯示數據。

正例：

let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });

2) 使用路由懶加載（延遲加載）機制

    {
        path: '/uploadAttachment',
        name: 'uploadAttachment',
        meta: {
          title: '上傳附件'
        },
        component: () => import('@/view/components/uploadAttachment/index.vue')
      },

3) router 中的命名規範

path、childrenPoints 命名規範採用kebab-case命名規範（儘量vue文件的目錄結構保持一致，因爲目錄、文件名都是kebab-case，這樣很方便找到對應的文件）

name 命名規範採用KebabCase命名規範且和component組件名保持一致！（因爲要保持keep-alive特性，keep-alive按照component的name進行緩存，所以兩者必須高度保持一致）

// 動態加載
export const reload = [
  {
    path: '/reload',
    name: 'reload',
    component: Main,
    meta: {
      title: '動態加載',
      icon: 'icon iconfont'
    },

    children: [
      {
        path: '/reload/smart-reload-list',
        name: 'SmartReloadList',
        meta: {
          title: 'SmartReload',
          childrenPoints: [
            {
              title: '查詢',
              name: 'smart-reload-search'
            },
            {
              title: '執行reload',
              name: 'smart-reload-update'
            },
            {
              title: '查看執行結果',
              name: 'smart-reload-result'
            }
          ]
        },
        component: () =>
          import('@/views/reload/smart-reload/smart-reload-list.vue')
      }
    ]
  }
];

4) router 中的 path 命名規範

path除了採用kebab-case命名規範以外，必須以 / 開頭，即使是children裏的path也要以 / 開頭。如下示例

目的：

經常有這樣的場景：某個頁面有問題，要立刻找到這個vue文件，如果不用以/開頭，path爲parent和children組成的，可能經常需要在router文件裏搜索多次才能找到，而如果以/開頭，則能立刻搜索到對應的組件
*

{
    path: '/file',
    name: 'File',
    component: Main,
    meta: {
      title: '文件服務',
      icon: 'ios-cloud-upload'
    },
    children: [
      {
        path: '/file/file-list',
        name: 'FileList',
        component: () => import('@/views/file/file-list.vue')
      },
      {
        path: '/file/file-add',
        name: 'FileAdd',
        component: () => import('@/views/file/file-add.vue')
      },
      {
        path: '/file/file-update',
        name: 'FileUpdate',
        component: () => import('@/views/file/file-update.vue')
      }
    ]
  }

(二) Vue 項目目錄規範

2.2.1 基礎

vue 項目中的所有命名一定要與後端命名統一。

比如權限：後端 privilege, 前端無論 router , store, api 等都必須使用 privielege 單詞！

2.2.2 使用 Vue-cli 腳手架

使用 vue-cli3 來初始化項目，項目名按照上面的命名規範。

2.2.3 目錄說明

目錄名按照上面的命名規範，其中 components 組件用大寫駝峯，其餘除 components 組件目錄外的所有目錄均使用 kebab-case 命名。

src                               源碼目錄
|-- 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新建頁面
|   |-- |-- role-update.vue                  role更新頁面
|   |-- |-- index.less                      role模塊樣式
|   |-- |-- components                      role模塊通用組件文件夾
|   |-- employee                         employee模塊

1) api 目錄

文件、變量命名要與後端保持一致。
此目錄對應後端 API 接口，按照後端一個 controller 一個 api js 文件。若項目較大時，可以按照業務劃分子目錄，並與後端保持一致。
api 中的方法名字要與後端 api url 儘量保持語義高度一致性。
對於 api 中的每個方法要添加註釋，註釋與後端 swagger 文檔保持一致。

正例：

後端 url： EmployeeController.java

/employee/add
/employee/delete/{id}
/employee/update

前端： employee.js

  // 添加員工
  addEmployee: (data) => {
    return postAxios('/employee/add', data)
  },
  // 更新員工信息
  updateEmployee: (data) => {
    return postAxios('/employee/update', data)
  },
    // 刪除員工
  deleteEmployee: (employeeId) => {
    return postAxios('/employee/delete/' + employeeId)
   },

2) assets 目錄

assets 爲靜態資源，裏面存放 images, styles, icons 等靜態資源，靜態資源命名格式爲 kebab-case

|assets
|-- icons
|-- images
|   |-- background-color.png
|   |-- upload-header.png
|-- styles

3) components 目錄

此目錄應按照組件進行目錄劃分，目錄命名爲 KebabCase，組件命名規則也爲 KebabCase

|components
|-- error-log
|   |-- index.vue
|   |-- index.less
|-- markdown-editor
|   |-- index.vue
|   |-- index.js
|-- kebab-case

4) constants 目錄

此目錄存放項目所有常量，如果常量在 vue 中使用，請使用 vue-enum 插件(https://www.npmjs.com/package/vue-enum)

目錄結構：

|constants
|-- index.js
|-- role.js
|-- employee.js

例子： employee.js

export const EMPLOYEE_STATUS = {
  NORMAL: {
    value: 1,
    desc: '正常'
  },
  DISABLED: {
    value: 1,
    desc: '禁用'
  },
  DELETED: {
    value: 2,
    desc: '已刪除'
  }
};

export const EMPLOYEE_ACCOUNT_TYPE = {
  QQ: {
    value: 1,
    desc: 'QQ登錄'
  },
  WECHAT: {
    value: 2,
    desc: '微信登錄'
  },
  DINGDING: {
    value: 3,
    desc: '釘釘登錄'
  },
  USERNAME: {
    value: 4,
    desc: '用戶名密碼登錄'
  }
};

export default {
  EMPLOYEE_STATUS,
  EMPLOYEE_ACCOUNT_TYPE
};

5) router 與 store 目錄

這兩個目錄一定要將業務進行拆分，不能放到一個 js 文件裏。

router 儘量按照 views 中的結構保持一致

store 按照業務進行拆分不同的 js 文件

6) views 目錄

命名要與後端、router、api 等保持一致
components 中組件要使用 PascalCase 規則

|-- views                            視圖目錄
|   |-- role                             role模塊名
|   |   |-- role-list.vue                    role列表頁面
|   |   |-- role-add.vue                     role新建頁面
|   |   |-- role-update.vue                  role更新頁面
|   |   |-- index.less                      role模塊樣式
|   |   |-- components                      role模塊通用組件文件夾
|   |   |   |-- role-header.vue                        role頭部組件
|   |   |   |-- role-modal.vue                         role彈出框組件
|   |-- employee                         employee模塊
|   |-- behavior-log                      行爲日誌log模塊
|   |-- code-generator                    代碼生成器模塊

2.2.4 註釋說明

整理必須加註釋的地方

公共組件使用說明
api 目錄的接口 js 文件必須加註釋
store 中的 state, mutation, action 等必須加註釋
vue 文件中的 template 必須加註釋，若文件較大添加 start end 註釋
vue 文件的 methods，每個 method 必須添加註釋
vue 文件的 data, 非常見單詞要加註釋

2.2.5 其他

1) 儘量不要手動操作 DOM

因使用 vue 框架，所以在項目開發中儘量使用 vue 的數據驅動更新 DOM，儘量（不到萬不得已）不要手動操作 DOM，包括：增刪改 dom 元素、以及更改樣式、添加事件等。

2) 刪除無用代碼

因使用了 git/svn 等代碼版本工具，對於無用代碼必須及時刪除，例如：一些調試的 console 語句、無用的棄用功能代碼。

前端 JS 項目開發規範

一、編程規約

(一)命名規範

1.1.1 項目命名

1.1.2 目錄命名

1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名

1.1.4 命名嚴謹性

(二)HTML 規範 （Vue Template 同樣適用）

1.2.1 HTML 類型

1.2.2 縮進

1.2.3 分塊註釋

1.2.4 語義化標籤

1.2.5 引號

(三) CSS 規範

1.3.1 命名

1.3.2 選擇器

1.3.3 儘量使用縮寫屬性

1.3.4 每個選擇器及屬性獨佔一行

1.3.5 省略0後面的單位

1.3.6 避免使用ID選擇器及全局標籤選擇器防止污染全局樣式

(四) LESS 規範

1.4.1 代碼組織

1)將公共less文件放置在style/less/common文件夾

2)按以下順序組織

1.4.2 避免嵌套層級過多

(五) Javascript 規範

1.5.1 命名

1) 採用小寫駝峯命名 lowerCamelCase，代碼中的命名均不能以下劃線，也不能以下劃線或美元符號結束

2) 方法名、參數名、成員變量、局部變量都統一使用 lowerCamelCase 風格，必須遵從駝峯形式。

3) 常量命名全部大寫，單詞間用下劃線隔開，力求語義表達完整清楚，不要嫌名字長。

1.5.2 代碼格式

1) 使用 2 個空格進行縮進

2) 不同邏輯、不同語義、不同業務的代碼之間插入一個空行分隔開來以提升可讀性。

1.5.3 字符串

1.5.4 對象聲明

1)使用字面值創建對象

2) 使用字面量來代替對象構造器

1.5.5 使用 ES6,7

1.5.6 括號

1.5.7 undefined 判斷

1.5.8 條件判斷和循環最多三層

1.5.9 this 的轉換命名

1.5.10 慎用 console.log

二、Vue 項目規範

(一) Vue 編碼基礎

2.1.1. 組件規範

1) 組件名爲多個單詞。

2) 組件文件名爲 pascal-case 格式

3) 基礎組件文件名爲 base 開頭，使用完整單詞而不是縮寫。

4) 和父組件緊密耦合的子組件應該以父組件名作爲前綴命名

5) 在 Template 模版中使用組件，應使用 PascalCase 模式，並且使用自閉合組件。

6) 組件的 data 必須是一個函數

7) Prop 定義應該儘量詳細

8) 爲組件樣式設置作用域

9) 如果特性元素較多，應該主動換行。

2.1.2. 模板中使用簡單的表達式

2.1.3 指令都使用縮寫形式

2.1.4 標籤順序保持一致

2.1.5 必須爲 v-for 設置鍵值 key

2.1.6 v-show 與 v-if 選擇

2.1.7 script 標籤內部結構順序

2.1.8 Vue Router 規範

1) 頁面跳轉數據傳遞使用路由參數

2) 使用路由懶加載（延遲加載）機制

3) router 中的命名規範

4) router 中的 path 命名規範

(二) Vue 項目目錄規範

2.2.1 基礎

2.2.2 使用 Vue-cli 腳手架

2.2.3 目錄說明

1) api 目錄

2) assets 目錄

3) components 目錄

4) constants 目錄

5) router 與 store 目錄

6) views 目錄

2.2.4 註釋說明

2.2.5 其他

1) 儘量不要手動操作 DOM

2) 刪除無用代碼

(二)HTML 規範（Vue Template 同樣適用）