VUEJS開發規範

VUEJS開發規範

1. 基於組件化開發理解
2. 組件命名規範
3. 結構化規範
4. 註釋規範
5. 編碼規範

---

基於組件化開發理解

• 什麼是組件？

  組件其實就是頁面組成的一部分，比如是電腦中的每個元件（如硬盤、鍵盤、鼠標），它是一個具備獨立的邏輯和功能或界面，同時又能根據規定的接口規則進行相互融化，變成一個完整的應用。
       頁面只不過是這樣組件的容器，組件自由組合造成功能完整的界面，當不須要某個組件，或者想要替換某個組件時，能夠隨時進行替換和刪除，而不影響整個應用的運行。前端組件化的核心思想就是將一個巨大複雜的東西拆分紅粒度合理的小東西。

• 組件化開發的好處

  提升開發效率
     方便重複使用
     簡化調試步驟
     提高整個項目的可維護性
     便於協同開發
     使其高內聚，低耦合，達到分治與複用的目的。

• 組件化和模塊化的區別

  組件化是從產品功能角度進行分割，模塊化是從代碼實現角度進行分割，模塊化是組件化的前提和基礎。

• Vue組件化開發

  單文件系統，樣式局部做用域
     基本組成結構：<template/> <script/> <style scoped/>
     組件註冊方式：1）公共組件全局註冊 2）其他組件局部註冊

組件命名規範

Vue官方文檔給予如下說明：

當註冊組件 (或者 prop) 時，可使用 kebab-case (短橫線分隔命名)、camelCase (駝峯式命名) 或 PascalCase (單詞首字母大寫命名)。
PascalCase 是最通用的聲明約定而 kebab-case 是最通用的使用約定。

命名可遵循如下規則：

一、有意義的名詞、簡短、具備可讀性
 二、以小寫開頭，採用短橫線分割命名
 三、公共組件命名以公司名稱簡拼爲命名空間(app-xx.vue)
 四、文件夾命名主要以功能模塊表明命名
 同時還須要注意：必須符合自定義元素規範: 使用連字符分隔單詞，切勿使用保留字。app- 前綴做爲命名空間: 若是很是通用的話可以使用一個單詞來命名，這樣能夠方便於其它項目裏複用。

結構化規範

• 基於Vue-cli腳手架的結構基礎劃分

  ├── index.html                      入口頁面
     ├── 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生產環境配置
     ├── config                          項目配置
     │   ├── dev.env.js                      開發環境變量
     │   ├── index.js                        項目配置文件
     │   ├── prod.env.js                     生產環境變量
     │   └── test.env.js                     測試環境變量
     ├── mock                            mock數據目錄
     │   └── hello.js
     ├── package.json                    npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息
     ├── src                             項目源碼目錄    
     │   ├── main.js                         入口js文件
     │   ├── App.vue                         根組件
     │   ├── components                      公共組件目錄
     │   │   └── title.vue
     │   ├── assets                          資源目錄，這裏的資源會被wabpack構建
     │   │   ├── css                         公共樣式文件目錄
     │   │   ├── js                          公共js文件目錄
     │   │   └── img                      圖片存放目錄
     │   ├── routes                          前端路由
     │   │   └── index.js
     │   ├── store                           應用級數據（state）
     │   │   └── 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中編寫頁面-->
          </div>
        </template>
        <script>
          export default {
            components : {
            },
            data () {
              return {
              }
            },
            methods: {
            },
            mounted() {
        
            }
         }
        </script>
        <!--聲明語言，而且添加scoped-->
        <style lang="less" scoped>
        </style>

• vue文件方法聲明順序

  - components   
      - props    
      - data     
      - created
      - mounted
      - activited
      - update
      - beforeRouteUpdate
      - metods   
      - filter
      - computed
      - watch

註釋規範

代碼註釋在一個項目的後期維護中顯的尤其重要，因此咱們要爲每個被複用的組件編寫組件使用說明，爲組件中每個方法編寫方法說明。
如下狀況，務必添加註釋

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

• 單行註釋

  普通方法通常使用單行註釋// 來講明該方法主要做用

• 多行註釋

  組件使用說明，和調用說明 
     <!--公用組件：數據表格
        /**
        * 組件名稱
        * @module 組件存放位置
        * @desc 組件描述
        * @author 組件做者
        * @date 2017年12月05日17:22:43
        * @param {Object} [title]    - 參數說明
        * @param {String} [columns] - 參數說明
        * @example 調用示例
        *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
            */
         -->

編碼規範

優秀的項目源碼，即便是多人開發，看代碼也如出一人之手。統一的編碼規範，可以使代碼更易於閱讀，易於理解，易於維護。儘可能按照ESLint格式要求編寫代碼

1.使用ES6風格編碼源碼
        定義變量使用let ,定義常量使用const
        使用export ，import 模塊化
    2.組件 props 原子化
        提供默認值
        使用 type 屬性校驗類型
        使用 props 以前先檢查該 prop 是否存在
    3.避免 this.$parent
    4.謹慎使用 this.$refs
    5.無需將 this 賦值給 component 變量
    6.調試信息console.log() debugger 使用完及時刪除