前端規範之vue 專案規範

其他規範：

HTML 規範

媒體檔案規範

CSS 規範

javascript 規範

nodeJs 規範

結構化規範（webpack）

   ├── index.html                      入口頁面
   ├── favicon.ico                     頁面圖示
   ├── .babelrc                        babel規則
   ├── .editorconfig                   編輯器配置
   ├── .eslintignore                   eslint忽略規律
   ├── .eslintrc.js                    eslint規則
   ├── .gitignore                      git忽略規則
   ├── build                           構建指令碼目錄
   │   ├── build-server.js                 執行本地構建伺服器，可以訪問構後的頁面
   │   ├── build.js                        生產環境構建指令碼
   │   ├── dev-client.js                   開發伺服器熱過載指令碼，主要用來實現開發階段的頁面自動重新整理
   │   ├── dev-server.js                   執行本地開發伺服器
   │   ├── utils.js                        構建相關工具方法
   │   ├── webpack.base.conf.js            wabpack基礎配置
   │   ├── webpack.dev.conf.js             wabpack開發環境配置
   │   └── webpack.prod.conf.js            wabpack生產環境配置
   │   └── webpack.cdn.conf.js             wabpack cdn配置
   │   └── webpack.dll.conf.js             wabpack dll配置
   ├── config                          專案配置
   │   ├── dev.env.js                      開發環境變數
   │   ├── index.js                        專案配置檔案
   │   ├── prod.env.js                     生產環境變數
   │   └── test.env.js                     測試環境變數
   ├── mock                            mock資料目錄
   │   └── hello.js
   ├── package.json                    npm包配置檔案，裡面定義了專案的npm指令碼，依賴包等資訊
   ├── readmd.md                       專案描述檔案
   ├── src                                專案原始碼目錄
   │   ├── main.js                            入口js檔案
   │   ├── App.vue                            根元件
   │   ├── components                         公共元件目錄
   │   │   └── title.vue
   │   ├── assets                         靜態資源目錄，這裡的資源會被wabpack構建
   │   │   ├── css                            公共樣式檔案目錄
   │   │   ├── js                             公共js檔案目錄（如幫助方法）
   │   │   └── img                            圖片存放目錄
   |   |── lib                            外部引用的外掛存放及修改檔案
   |   |—— datas                          模擬資料，臨時存放
   │   ├── routes                         前端路由
   │   │   └── index.js
   │   ├── api                            介面，統一管理
   │   │   └── index.js
   │   ├── store                          vuex, 統一管理
   │   │   └── index.js
   │   └── views                          檢視模組名
   │       ├── hello.vue
   │       └── notfound.vue
   ├── static                             純靜態資源，不會被wabpack構建。
   └── test                               測試檔案目錄（unit&e2e）
       └── unit                               單元測試
           ├── index.js                           入口指令碼
           ├── karma.conf.js                      karma配置檔案
           └── specs                           單測case目錄
               └── Hello.spec.js
複製程式碼

vue 檔案

• 基本結構

  <template>
    <div></div>
  </template>
  <script>
    export default {
      components: {},
      data() {
        return {};
      },
      methods: {},
      mounted() {}
    };
  </script>
  <!-- 宣告語言，並且新增scoped -->
  <style lang="less" scoped></style>
  複製程式碼

• vue 檔案方法宣告順序

  - components
  - props
  - data
  - computed
  - created
  - mounted
  - activited
  - update
  - beforeRouteUpdate
  - metods
  - watch
  複製程式碼

標籤屬性自動換行

對除第一個屬性外的其他每個屬性進行換行，並保持對齊

<!-- 推薦 -->
<a :href="item.onestore_url"
   target="_blank"
   @click="goToDownload()">
  <img src="../images/one_downloadbadge_red_black.png"
       alt="download-icon">
</a>

複製程式碼

<!-- 不推薦 -->
<a :href="item.onestore_url" target="_blank" @click="goToDownload()">
  <img src="../images/one_downloadbadge_red_black.png" alt="">
</a>

複製程式碼

元件命名規範

• 元件名應該始終是多個單詞的，根元件 App 除外

• 有意義的名詞、簡短、具有可讀性

• 命名遵循 PascalCase(單詞首字母大寫命名) 約定

  • 公用元件以 Abcd (公司名縮寫簡稱) 開頭，如（AbcdDatePicker,AbcdTable）
  • 頁面內部元件以元件模組名簡寫為開頭，Item 為結尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）

• 使用遵循 kebab-case(短橫線分隔命名) 約定

• 在頁面中使用元件需要前後閉合，並以短線分隔，如（<abcd-date-picker></abcd-date-picker>，<abcd-table></abcd-table>）

• 匯入及註冊元件時，遵循 PascalCase(單詞首字母大寫命名) 約定

• 同時還需要注意：必須符合自定義元素規範: 切勿使用保留字。

props 命名規範

在宣告 prop 的時候，其命名應該始終使用 camelCase，而在模板中應該始終使用 kebab-case

<!-- 推薦 -->
<script>
  props: {
    greetingText: String;
  }
</script>

<welcome-message greeting-text="hi"></welcome-message>

<!-- 不推薦 -->
<script>
  props: {
    'greeting-text': String
  }
</script>

<welcome-message greetingText="hi"></welcome-message>
複製程式碼

註釋規範

程式碼註釋在一個專案的後期維護中顯的尤為重要，所以我們要為每一個被複用的元件編寫元件使用說明，為元件中每一個方法編寫方法說明。

以下情況，務必新增註釋

1.公共元件使用說明
2.各元件中重要函式或者類說明
3.複雜的業務邏輯處理說明
4.特殊情況的程式碼處理說明,對於程式碼中特殊用途的變數、存在臨界值、函式中使用的hack、使用了某種演算法或思路等需要進行註釋描述
5.註釋塊必須以/**（至少兩個星號）開頭**/；
6.單行註釋使用//；
7.多重 if 判斷語句
複製程式碼

編碼規範

使用 ES6 風格編碼原始碼

• 定義變數使用 let ,定義常量使用 const

• 靜態字串一律使用單引號或反引號，動態字串使用反引號

  // 推薦
  const a = 'foobar';
  const b = `foo${a}bar`;
  const c = 'foobar';
  
  // 不推薦
  const a = 'foobar';
  const b = 'foo' + a + 'bar';
  複製程式碼

• 解構賦值

  // 陣列解構賦值
  const arr = [1, 2, 3, 4];
  // 推薦
  const [first, second] = arr;
  // 不推薦
  const first = arr[0];
  const second = arr[1];
  
  // 物件解構賦值
  // 推薦
  function getFullName(obj) {
    const { firstName, lastName } = obj;
  }
  // best
  function getFullName({ firstName, lastName }) {}
  // 不推薦
  function getFullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;
  }
  複製程式碼

• 拷貝陣列

  使用擴充套件運算子（...）拷貝陣列。

  const items = [1, 2, 3, 4, 5];
  // 推薦
  const itemsCopy = [...items];
  // 不推薦
  const itemsCopy = items;
  複製程式碼

• 箭頭函式

  需要使用函式表示式的場合，儘量用箭頭函式代替。因為這樣更簡潔，而且繫結了 this

  // 推薦
  const boundMethod = (...params) => method.apply(this, params);
  // 不推薦
  const self = this;
  const boundMethod = function(...params) {
    return method.apply(self, params);
  };
  複製程式碼

• 模組

  • 如果模組只有一個輸出值，就使用 export default，如果模組有多個輸出值，就不使用 export default，export default 與普通的 export 不要同時使用

    // 推薦
    import myObject from './importModule';
    
    // 不推薦
    import * as myObject from './importModule';
    複製程式碼

  • 如果模組預設輸出一個函式，函式名的首字母應該小寫

    function makeStyleGuide() {}
    
    export default makeStyleGuide;
    複製程式碼

  • 如果模組預設輸出一個物件，物件名的首字母應該大寫

    const StyleGuide = {
      es6: {}
    };
    
    export default StyleGuide;
    複製程式碼

指令規範

• 指令有縮寫一律採用縮寫形式

  // 推薦
  :class="{'show-left'：true}"
  @click="getListData"
  
  // 不推薦
  v-bind:class="{'show-left'：true}"
  v-on:click="getListData"
  複製程式碼

• v-for 迴圈必須加上 key 屬性，在整個 for 迴圈中 key 需要唯一

  <!-- 推薦 -->
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>
  
  <!-- 不推薦 -->
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
  複製程式碼

• 避免 v-if 和 v-for 同時用在一個元素上（效能問題）

Props 規範

• 元件 props 原子化
• 提供預設值
• 使用 type 屬性校驗型別
• 使用 props 之前先檢查該 prop 是否存在

// bad 這樣做只有開發原型系統時可以接受
props: ['status']

// good
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

複製程式碼

其他

• 避免 this.$parent

• 除錯資訊 console.log() debugger 使用完及時刪除

• 除了三目運算，if,else 等禁止簡寫

  // bad
  if (true) alert(name);
  console.log(name);
  
  // good
  if (true) {
    alert(name);
  }
  console.log(name);
  複製程式碼

• 全域性變數的位置

  如無特殊情況，變數統一放到 data 內，避免元件重用時程式碼不被執行

  // 推薦
  export default {
    data() {
      return {
        today: new Date()
      };
    }
  };
  複製程式碼

  // 不推薦
  const today = new Date();
  export default {
    data() {
      return {
        t: today
      };
    }
  };
  複製程式碼

開啟 ESLint

• 目前廣泛使用的有三種有google標準、airbnb標準、standard標準

• 安裝

  用 vue 腳手架初始化檔案時，通過 vue-cli 的問答初始化 ESLint 的配置（推薦）

• 自動修復

  簡單的程式碼風格 eslint 可以直接修復，比如我們希望 eslint 修復 src 資料夾下的 js 檔案，那麼在 package.json 中新增一條自定義命令

  # 安裝eslint模組
  $ npm install eslint --save-dev
  複製程式碼

  # 新增eslint修復命令
  "lint-fix": "eslint --fix --ext .js src/"
  複製程式碼

  執行 npm run lint-fix 將自動修復。無法修復的將在控制檯給出提示。

• git 預檢查

  原則上每次git commit前我們都需要先執行一下 lint-fix命令的，避免遺忘或者偷懶，我們使用預檢查工具進行處理。

  husky 是一個 npm 模組，可以在 git 提交前做攔截，如果攔截返回異常資訊，將取消提交。

  安裝husky

  $ npm install husky --save-dev
  複製程式碼

  新增攔截事件precommit

  # package.json
  "precommit": "npm run lint-fix"
  複製程式碼

  在提交前自動執行 eslint 修復命令，如果成功全部修復就可以正常提交，如果沒有全部修復，將取消提交。

使用Babel

我們的 javascript 程式碼中經常會寫 ES6 程式碼，而這些程式碼在舊版本瀏覽器上是不被識別的，需要轉換成 ES5。

• 在專案根目錄建立 .babelrc 檔案

  /* 根目錄 .babelrc 檔案 */
  {
    // 此項指明，轉碼的規則
    "presets": [
      // env項是藉助外掛babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，並且設定amd,commonjs這樣的模組化檔案，不進行轉碼
      ["env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }],
      // 下面這個是不同階段出現的es語法，包含不同的轉碼外掛
      "stage-2"
    ],
    // 下面這個選項是引用外掛來處理程式碼的轉換，transform-runtime用來處理全域性函式和優化babel編譯
    "plugins": ["transform-vue-jsx", "transform-runtime"],
    // 下面指的是在生成的檔案中，保留註釋
    "comments": true,
    // 下面這段是在特定的環境中所執行的轉碼規則，當環境變數是下面的test就會覆蓋上面的設定
    "env": {
      "test": {
        "presets": ["env", "stage-2"],
        "plugins": ["transform-vue-jsx", "istanbul"]
      }
    }
  }
  複製程式碼

• 使用 babel-polyfill 相容 ES6

  1、安裝

  $ npm install babel-polyfill --save-dev
  複製程式碼

  2、找到 webpack.base.conf.js(基礎配置，全域性生效) 檔案，修改入口如下

  module.exports = {
      entry: {
          app: ['babel-polyfill', './src/main.js'],
      },
  複製程式碼

其他相關文章

Vuex的使用