前端規範之vue 專案規範

小婉發表於2019-07-01

其他規範：

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的使用

前端規範之媒體檔案規範
2019-06-21
前端
前端規範之javascript規範
2019-06-25
前端JavaScript
前端規範之CSS規範
2019-06-25
前端CSS
前端規範之HTML 規範
2019-06-18
前端HTML
前端規範之nodeJs 規範
2019-06-28
前端NodeJS
前端規範之CSS規範（Stylelint）
2021-09-28
前端CSS
前端開發規範：命名規範、html規範、css規範、js規範
2017-05-30
前端HTMLCSSJS
前端規範之Git提交規範（Commitizen）
2021-09-29
前端GitMIT
Vue前端開發規範
2018-04-21
Vue前端
『前端規範化』CSS命名規範化
2019-03-23
前端CSS
前端規範與思考(二)———css規範
2022-01-17
前端CSS
前端工具類專案規範化-使用TS
2019-04-05
前端
專案規範筆記
2019-03-18
筆記
Android 專案規範
2017-03-24
Android
web前端規範
2019-02-16
Web前端
前端規範目的
2019-01-05
前端
前端分支規範
2023-02-24
前端
程式碼規範之前端編寫碼規範
2020-10-20
前端
學好WEB前端之媒體檔案規範
2019-06-29
Web前端
學好WEB前端之HTML 規範
2019-06-29
Web前端HTML
學好WEB前端之CSS規範
2019-06-29
Web前端CSS
學好WEB前端之javascript規範
2019-06-29
Web前端JavaScript
個人專案開發規範
2019-08-06
我的專案命名規範
2018-08-13
網易郵箱前端Javascript編碼規範：類規範
2012-05-11
前端JavaScript
Web前端——檔案存放位置規範
2017-11-12
Web前端
前端規範那些事
2020-02-25
前端
前端開發規範
2020-01-13
前端
前端模組化規範
2019-02-16
前端
前端命名基本規範
2020-11-24
前端
前端程式碼規範
2018-01-17
前端
資料庫規範之SQL規範寫法
2018-06-23
資料庫SQL
MySQL資料庫規範 (設計規範+開發規範+操作規範)
2020-10-17
MySql資料庫
網易郵箱前端Javascript編碼規範：基礎規範
2013-04-18
前端JavaScript
《專案經理指導手冊》規範篇5，任務規範
2022-01-28
專案中的 Git 使用規範
2020-04-09
Git
專案規範-git commit 配置
2021-05-18
GitMIT
淺談專案程式碼規範
2021-06-13