前端規範之vue 項目規範

時間  2019-11-06
標籤 前端 規範 vue 項目 简体版
原文   原文鏈接

其餘規範：

HTML 規範javascript

媒體文件規範css

CSS 規範html

javascript 規範前端

nodeJs 規範vue

結構化規範（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 文件方法聲明順序java

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

標籤屬性自動換行

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

<!-- 推薦 -->
<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 除外webpack

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

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

    • 公用組件以 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

    一、安裝

    $ npm install babel-polyfill --save-dev
複製代碼

    二、找到 webpack.base.conf.js(基礎配置，全局生效) 文件，修改入口以下

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

其餘相關文章

Vuex的使用

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程