Vue開發規範

時間  2019-12-13
標籤 vue 開發 規範 简体版
原文   原文鏈接

組件化開發

前端組件化是如今前端框架中一個很是重要的思想元素，將頁面內容進行拆分以後，可獨立維護，可複用性大大提升。哪一個地方出問題，直接去修改的對應的組件便可。團隊人員配置多的時候，你寫你的header，我寫個人footer。相互不影響，不衝突。而組件的合理拆分，也就變成了衡量水平的一個維度之一。css

組件其實就是頁面組成的一部分，比如是電腦中的每個元件（如硬盤、鍵盤、鼠標），它是一個具備獨立的邏輯和功能或界面，同時又能根據規定的接口規則進行相互融化，變成一個完整的應用。html

頁面只不過是這樣組件的容器，組件自由組合造成功能完整的界面，當不須要某個組件，或者想要替換某個組件時，能夠隨時進行替換和刪除，而不影響整個應用的運行。前端組件化的核心思想就是將一個巨大複雜的東西拆分紅粒度合理的小東西。前端

組件化是長期開發過程當中一個提煉精華的過程，目的主要是如下幾點：vue

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

Vue組件化開發webpack

  • 單文件系統，樣式局部做用域
  • 基本組成結構：<template/> <script/> <style scoped/>
  • 組件註冊方式：
    1）公共組件全局註冊：要註冊一個全局組件，可使用Vue.component(tagName,option)
    2）其他組件局部註冊：經過使用組件實例選項component註冊，可使組件僅在另外一個實例或者組件的做用域中可用

結構化規範

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

├── 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                            單元測試
│   │   ├── index.js                    入口腳本
│   │   ├── karma.conf.js               karma配置文件
│   │   └── specs                       單測case目錄
│   │   │   └── HelloWorld.spec.js
│── .gitignore.js                  提交代碼時候須要配置的忽略提交的代碼目錄
│── README.md                      展現項目基本用法功能的說明性文件

組件命名規範

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

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

命名可遵循如下規則：npm

  1. 有意義的名詞、簡短、具備可讀性,如：searchSidebar.vue
  2. 以大寫開頭，採用帕斯卡命名,如：todoList.vue
  3. 公共組件命名以公司名稱簡拼爲命名空間,如：app-xx.vue
  4. 文件夾命名主要以功能模塊表明命名

同時還須要注意：必須符合自定義元素規範: 使用連字符分隔單詞，切勿使用保留字。app- 前綴做爲命名空間， 若是很是通用的話可以使用一個單詞來命名，這樣能夠方便於其它項目裏複用。json

強制要求

  1. 組件名爲多個單詞
    組件名應該始終是多個單詞的，根組件 App 除外。

    // 反例
export default {
    name: 'Todo',
    // ...
}

// 正例
export default {
    name: 'TodoItem',
    // ...
}

  2. 組件數據
    組件的 data 必須是一個函數。
    當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數。

    // 反例
 export default {
   data: {
     foo: 'bar'
   }
 }
 
 // 正例
 export default {
   data () {
     return {
       foo: 'bar'
     }
   }
 }
 // 在一個 Vue 的根實例上直接使用對象是能夠的，
 // 由於只存在一個這樣的實例
 new Vue({
   data: {
     foo: 'bar'
   }
 })

  3. Prop定義
    Prop 定義應該儘可能詳細。
    在你提交的代碼中，prop 的定義應該儘可能詳細，至少須要指定其類型。

    細緻的 prop 定義有兩個好處：
   1) 它們寫明瞭組件的 API，因此很容易看懂組件的用法；
   2) 在開發環境下，若是向一個組件提供格式不正確的 prop，Vue 將會告警，以幫助你捕獲潛在的錯誤來源。
   



 // 反例
 props: ['status']
 
 //正列
 props: {
   status: String
 }
 // 更好的作法！
 props: {
   status: {
     type: String,
     required: true,
     validator: function (value) {
       return [
         'syncing',
         'synced',
         'version-conflict',
        'error'
       ].indexOf(value) !== -1
     }
   }
 }

  4. 爲v-for設置鍵值
    老是用 key 配合 v-for。
    在組件上老是必須用 key 配合 v-for，以便維護內部組件及其子樹的狀態。甚至在元素上維護可預測的行爲，好比動畫中的對象固化 (object constancy)，也是一種好的作法。

    // 反例
 <ul>
   <li v-for="todo in todos">
     {{ todo.text }}
   </li>
 </ul>
 // 正例
 <ul>
   <li v-for="todo in todos" :key="todo.id">
     {{ todo.text }}
   </li>
 </ul>

  5. 避免 v-if 和 v-for 用在一塊兒

    永遠不要把 v-if 和 v-for 同時用在同一個元素上。
    通常咱們在兩種常見的狀況下會傾向於這樣作：

    • 爲了過濾一個列表中的項目 (好比 v-for="user in users" v-if="user.isActive")。在這種情形下，請將 users 替換爲一個計算屬性 (好比activeUsers)，讓其返回過濾後的列表。

    • 爲了不渲染本應該被隱藏的列表 (好比 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將 v-if 移動至容器元素上 (好比 ul, ol)。

      // 反例
<ul>
  <li v-for="user in users" v-if="user.isActive" :key="user.id" >
    {{ user.name }}
  </li>
</ul>

<ul>
  <li v-for="user in users" v-if="shouldShowUsers" :key="user.id" >
    {{ user.name }}
  </li>
</ul>

// 正例
<ul>
  <li v-for="user in activeUsers" :key="user.id">
    {{ user.name }}
  </li>
</ul>

<ul v-if="">
  <li v-for="user in users" :key="user.id">
    {{ user.name }}
  </li>
</ul>

  6. 爲組件樣式設置做用域
    對於應用來講，頂級 App 組件和佈局組件中的樣式能夠是全局的，可是其它全部組件都應該是有做用域的。

    這條規則只和單文件組件有關。你不必定要使用 scoped 特性。設置做用域也能夠經過 CSS Modules，那是一個基於 class 的相似 BEM 的策略，固然你也可使用其它的庫或約定。
    無論怎樣，對於組件庫，咱們應該更傾向於選用基於 class 的策略而不是 scoped 特性。
    這讓覆寫內部樣式更容易：使用了常人可理解的 class 名稱且沒有過高的選擇器優先級，並且不太會致使衝突。

    // 反例
 <template>
     <button class="btn btn-close">X</button>
 </template>    
 <style>
 .btn-close {
   background-color: red;
 } 
 </style>
 
 // 正例
 <template>
   <button class="button button-close">X</button>
 </template>
 <!-- 使用 `scoped` 特性 -->
 <style scoped>
 .button {
    border: none;
    border-radius: 2px;
  }
  .button-close {
    background-color: red;
  }
 </style>

強烈推薦 (加強可讀性)

  1. 單文件組件文件的大小寫
    單文件組件的文件名應該要麼始終是單詞大寫開頭 (PascalCase)，要麼始終是橫線鏈接 (kebab-case)。

    // 反例
components/
|- myComponent.vue
|- mycomponent.vue

// 正例
components/
|- MyComponent.vue

  2. 基礎組件名
    應用特定樣式和約定的基礎組件 (也就是展現類的、無邏輯的或無狀態的組件) 應該所有以一個特定的前綴開頭，好比 Base、App 或 V。

    // 反例
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

// 正例
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

  3. 單例組件名
    只應該擁有單個活躍實例的組件應該以 The 前綴命名，以示其惟一性。
    這不意味着組件只可用於一個單頁面，而是每一個頁面只使用一次。這些組件永遠不接受任何 prop，由於它們是爲你的應用定製的，而不是它們在你的應用中的上下文。若是你發現有必要添加 prop，那就代表這其實是一個可複用的組件，只是目前在每一個頁面裏只使用一次。

    // 反例 
components/
|- Heading.vue
|- MySidebar.vue
   
// 正例 
components/
|- TheHeading.vue
|- TheSidebar.vue

  4. 緊密耦合的組件名
    和父組件緊密耦合的子組件應該以父組件名做爲前綴命名。
    若是一個組件只在某個父組件的場景下有意義，這層關係應該體如今其名字上。由於編輯器一般會按字母順序組織文件，因此這樣作能夠把相關聯的文件排在一塊兒。

    // 反例
components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

// 正例
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

  5. 模板中的組件名大小寫
    對於絕大多數項目來講，在單文件組件和字符串模板中組件名應該老是 PascalCase 命名.

    // 反例
<!-- 在單文件組件和字符串模板中 -->
<mycomponent/>
<!-- 在單文件組件和字符串模板中 -->
<myComponent/>

// 正例
<!-- 在單文件組件和字符串模板中 -->
<MyComponent/>

  6. 帶引號的特性值
    非空 HTML 特性值應該始終帶引號。
    在 HTML 中不帶空格的特性值是能夠沒有引號的，但這鼓勵了你們在特徵值裏不寫空格，致使可讀性變差。

    建議：html屬性使用雙引號" "，js中使用單引號' '

    // 反例
<AppSidebar :style={width:sidebarWidth+'px'}>
let name = "張三",
    address = '上海';

// 正例
<AppSidebar :style="{ width: sidebarWidth + 'px' }">
let name = '張三',
    address = '上海';

  7. 推薦單文件組件元素的順序
    單文件組件應該老是讓<template> 、<script> 和 <style> 標籤的順序保持一致。且 <style> 要放在最後，另外兩個標籤至少要有一個，而且全部單文件組件格式要統一。

    <template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

組件選項聲明順序

- name
- components
- directives
- filters
- mixins
- props
- data
- computed
- watch
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- methods

註釋規範

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

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

  • 單行註釋

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

  • 多行註釋
    組件使用說明，和調用說明

    <!--公用組件：Dialog彈出框
 /**
 * 組件名稱
 * @module 組件存放位置
 * @desc 組件描述
 * @author 組件做者
 * @date 2018年12月20日17:22:43
 * @param {Object} [title]    - 參數說明
 * @param {String} [show] - 參數說明
 * @example 調用示例
 *  <dialog :title="title" :show="show"></dialog>
  */
  -->

編碼規範

優秀的項目源碼，即便是多人開發，看代碼也如出一人之手。統一的編碼規範，可以使代碼更易於閱讀，易於理解，易於維護。儘可能按照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 使用完及時刪除
  7. html屬性值使用雙引號，js中定義變量用單引號，如let name = 'jack'
  8. v-for循環時必定要寫:key，而且key使用不能使用循環的序號index，要使用屬性id
  9. 模板內的複雜邏輯，推薦使用計算屬性computed
  10. watch監聽時，慎用deep:true屬性，深度監聽會對性能產生影響

總結

這是我在項目開發中總結出來的一些vue開發規範，總結的還不是很完善，有問題的地方但願你們提出來，進一步完善vue開發規範，謝謝！
參考：vue風格指南

來都來了點一下贊吧，你的贊是對我最大的鼓勵^_^

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