代碼提交規范

每次提交代碼時，commit按規范進行備注，如：本次提交新增了新功能：feat: 新增xx功能

HTML規范

1. 普通標簽使用小寫，外部引入的組件標簽使用大寫

<div></div>
<el-button><el-button>
<Pagination />

2. 屬性的定義，統一使用雙引號，

<input type="text" name="title" />

3. 有下載需求的圖片采用 img 標簽實作，無下載需求的圖片采用 CSS 背景圖實作
   產品 logo、用戶頭像、用戶產生的圖片等有潛在下載需求的圖片，以 img 形式實作，能方便用戶下載
   無下載需求的圖片，比如：icon、背景、代碼使用的圖片等，盡可能采用 css 背景圖實作

4. 為圖片添加 alt 屬性，提高圖片加載失敗時的用戶體驗

<img src="#" alt="這是一張圖片" />

5. 為圖片添加 width 和 height 屬性，以避免頁面抖動

<img src="#" alt="#" width="#" height="#">

CSS規范

前綴規范

1. class命名

• class 必須單詞全字母小寫，單詞間以 - 分隔（例如，.btn 和 .btn-danger），
• 避免過度任意的簡寫，.btn 代表 button，但是 .s 不能表達任何意思，
• class 名稱應當盡可能短，并且意義明確，

2. CSS命名規范(規則)常用的CSS命名規則

 頭：header
 內容：content/container
 尾：footer
 導航：nav
 側欄：sidebar
 欄目：column
 頁面外圍控制整體佈局寬度：wrapper
 左右中：left right center
 登錄條：loginbar
 標志：logo
 廣告：banner
 頁面主體：main
 熱點：hot
 新聞：news
 下載：download
 子導航：subnav
 選單：menu
 子選單：submenu
 搜索：search
 友情鏈接：friendlink
 頁腳：footer
 著作權：copyright
 滾動：scroll
 內容：content
 標簽：tags
 文章串列：list
 提示資訊：msg
 小技巧：tips
 欄目標題：title
 加入：joinus
 指南：guide
 服務：service
 注冊：regsiter
 狀態：status
 投票：vote
 合作伙伴：partner

JavaScript規范

注釋

原則

• As short as possible（如無必要，勿增注釋）：盡量提高代碼本身的清晰性、可讀性，
• As long as necessary（如有必要，盡量詳盡）：合理的注釋、空行排版等，可以讓代碼更易閱讀、更具美感，
  單行注釋
  必須獨占一行，// 后跟一個空格，縮進與下一行被注釋說明的代碼一致，
  多行注釋
  避免使用 /…/ 這樣的多行注釋，有多行注釋內容時，使用多個單行注釋，
  函式/方法注釋

1. 函式/方法注釋必須包含函式說明，有引數和回傳值時必須使用注釋標識，；
2. 引數和回傳值注釋必須包含型別資訊和說明；

/**
 * 函式描述
 *
 * @param {string} p1 引數1的說明
 * @param {string} p2 引數2的說明，比較長
 *     那就換行了.
 * @param {number=} p3 引數3的說明（可選）
 * @return {Object} 回傳值描述
 */
function foo(p1, p2, p3) {
    let p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

命名規范

使用 Camel 命名法，

運算子

不要使用約相等運算子，使用=強相等運算子
同理使用!==

其他：

一個請求時，使用.then()

function request(){
    getDataList().then(res => {
        console.log(res);
    })
}

多個請求時，使用async/await

async function request(){
    const res1 = await getDataList1();
    const res2 = await getDataList2();
}

Vue 代碼規范

常規

• 當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是回傳一個物件的函式 data() { return {…} }，
• prop 的定義應該盡量詳細，至少需要指定其型別，

export default {
    prop: [
        data: {
            type: Array,
            default() {
                return []
            }
        }
    ]
}

• 布爾型別的 attribute， 為 true 時直接寫屬性值，
• 不要在computed中對vue變數進行操作，
• 應該優先通過 prop 和事件進行父子組件之間的通信，而不是 this.$parent 或改變 prop，
• 在組件上總是必須用 key 配合 v-for，以便維護內部組件及其子樹的狀態，
• v-if 和 v-for 不能同時使用
• 公共方法盡量不要掛到原型上, 可以寫在 utils 檔案，也可以使用 mixin 檔案，不要將業務公共組件注冊到全域，
• 不要將任何第三方插件掛載到 vue 原型上，
• 具有高度通用性的方法，要封裝到 libs、全域組件或指令集里，
• 為組件樣式設定作用域，
• 盡量使用指令縮寫，

vuex

State (opens new window)為單一狀態樹，在 state 中需要定義我們所需要管理的陣列、物件、字串等等，只有在這里定義了，在 vue 的組件中才能獲取你定義的這個物件的狀態，

• 修改 state 中資料必須通過 mutations，
• 每一個可能發生改變的 state 必須同步創建一潭訓多條用來改變它的 mutations，
• 服務端獲取的資料存放在 state 中，作為原始資料保留，不可變動，
  Getters (opens new window)有點類似 vue.js 的計算屬性，當我們需要從 store 的 state 中派生出一些狀態，那么我們就需要使用 getters，getters 會接收 state 作為第一個引數，而且 getters 的回傳值會根據它的依賴被快取起來，只有 getters 中的依賴值（state 中的某個需要派生狀態的值）發生改變的時候才會被重新計算，
• 通過 getters 處理你需要得到的資料格式，而不是通過修改 state 原始資料，
• 組件內不強制使用 mapGetters，因為你可能需要使用 getter 和 setter，
• 改變 state 的唯一方法就是提交 mutations (opens new window)，
• 組件內使用 mapMutations 輔助函式將組件中的 methods 映射為 store.commit 呼叫，
• 命名采用 大寫字母 + 下劃線 的規則，
• 定義 CLEAR，以確保路由切換時可以初始化資料，
  Actions
• 頁面重的資料介面盡量在 actions (opens new window)中呼叫，
• 服務端回傳的資料盡量不作處理，保留原始資料，
• 獲取到的資料必須通過呼叫 mutations 改變 state，
  Modules
• 通常情況下按照頁面劃分 modules (opens new window)，
• 默認內置了 system 保證了腳手架的基礎功能，
• 每個頁面模塊或頁面的子模塊添加屬性 namespaced: true，
  檔案命名規則
  Component
  所有的Component檔案都是以大寫開頭 (PascalCase)，這也是官方所推薦的，
  但除了 index.vue，
  例子：
• @/components/BackToTop/index.vue
• @/components/Charts/Line.vue
• @/views/example/components/Button.vue
  JS 檔案
  所有的.js檔案都遵循橫線連接 (kebab-case)，
  例子：
• @/utils/open-window.js
• @/views/svg-icons/require-icons.js
• @/components/MarkdownEditor/default-options.js
  Views
  在views檔案下，代表路由的.vue檔案都使用橫線連接 (kebab-case)，代表路由的檔案夾也是使用同樣的規則，
  例子：
• @/views/svg-icons/index.vue
• @/views/svg-icons/require-icons.js
  使用橫線連接 (kebab-case)來命名views主要是出于以下幾個考慮，
• 橫線連接 (kebab-case) 也是官方推薦的命名規范之一 檔案
• views下的.vue檔案代表的是一個路由，所以它需要和component進行區分(component 都是大寫開頭)
• 頁面的url 也都是橫線連接的，比如https://www.xxx.admin/export-excel，所以路由對應的view應該要保持統一
• 沒有大小寫敏感問題
  代碼格式化工具
  使用prettier插件進行開發
  代碼檢測工具
  使用eslint插件進行開發
  安裝ESlint插件

安裝并配置完成 ESLint 后，我們繼續回到 VSCode 進行擴展設定，依次點擊 檔案 > 首選項 > 設定 打開 VSCode 組態檔,添加如下配置

{
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true
}