Vue多人協做開發規範統一指南

祝各位讀者端午節快樂

最近公司活多，好長時間沒有精下心來寫文章了。公司剛分配了一個活，這個活是外包過來的，項目總體結構很是差，理解起來費勁。面對這種項目只能硬着頭皮上了。前端

面對這種項目，首先得整體有個思路：將大模塊拆分紅小模塊，一個一個的突破，找到其中之間每一個組件的聯繫，這樣寫增長新的業務就上手容易一點了。vue

其實Vue項目，主要搞清楚這幾點，上手相對容易一點。web

1. 路由模塊
面試

2. 請求模塊微信

3.狀態管理模塊app

把以上3點搞清楚了，那麼剩下的就是開發組件了。編輯器

每一個團隊開發規範不同，我的開發更不同。
若是當你接收一個外包項目，你得了解他的開發規範，組件命名，字段命名，方法名…….在熟悉他的規範的同時須要必定的時間成本
若是業界每一個人均可以遵循官方提供的規範開發，你們都會受益，何樂而不爲呢函數

下面咱們來學習一下Vue 的開發規範

Vue 風格指南

組件命名

Vue.component('todo-item',{
    
})


export default {
    name: 'TodoItem'
}

Vue data 數據必須是一個函數

❝
若是``data` 是一個對象時，全部Vue 實例都公用一份data，如只想改動某一塊，全部模塊都會跟着改變。學習

如何阻止呢，實現每一個組件實例均可以管理本身的數據？測試

``在 JavaScript 中，在一個函數中返回這個對象就能夠了：`
❞

Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})


// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

Prop 定義詳細

❝
在組件之間傳遞數據時：

父組件向子組件傳遞數據時，經過在子組件上動態綁定傳值，而後在子組件中，經過Prop 來接收使用便可。

通常咱們會直接在Prop 直接接收父組件動態綁定的key，沒有類型約束，這樣父組件傳遞任何類型數據均可以，這就存在必定的缺陷了。

eg：例如，某個key 只能傳遞number類型，你傳遞過來的是 string 類型，這不就尷尬了。
// 正確作法
props: {
  status: {
    type: String,   // 類型
    required: true  // 必填
  }
}
❞

Prop 大小寫

❝
「在聲明 prop 的時候，其命名應該始終使用 camelCase，而在模板和 JSX 中應該始終使用 kebab-case。」
❞

props: {
  greetingText: String
}


<WelcomeMessage greeting-text="hi"/>

V-for 設置key的必要性

❝
在組件上老是必須用 key 配合 v-for，以便維護內部組件及其子樹的狀態。
❞

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

永遠不要把 v-if 和 v-for 同時用在同一個元素上。

❝

當 Vue 處理指令時， v-for 比 v-if 具備更高的優先級

通常要用到 v-for 與 v-if 連用時，會將 v-for 的數據進行 computed 處理後返回對應的數據來使用

❞

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}


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

❝

v-for 與 v-if 分開使用，通常將 v-if 放在 v-for 的最外層

❞

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

爲組件樣式設置做用域

❝
在爲組件寫CSS 樣式時，若是不爲你單個組件樣式添加樣式做用域的話，它會影響全局樣式。

在App.vue 頂級組件中，它的樣式是全局的.

如何解決單組件樣式影響全局呢？官方提供了3中解決方案

scoped Style 中加入 scoped

使用CSS Modules 來設定CSS 做用域`

基於 class 的相似 BEM的策略

❞

// 1, scoped

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>




//2. CSS Modules

<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- 使用 CSS Modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>


//3.BEM

<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- 使用 BEM 約定 -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

單文組件文件命名大小寫駝峯命名

1. 第一種方式
components/
|- MyComponent.vue


2. 第二種方式
components/
|- MyComponent.vue

基礎組件命名

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

components/
|- BaseButton.vue
|- BaseTable.vue



components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
|- BaseIcon.vue



components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

模板中組件名大小寫

❝
單文件組件模板 ``PascalCas*`

Dom 模板中 kebab-case
❞

<!-- 在單文件組件和字符串模板中 -->
<MyComponent/>
    
    
<!-- 在 DOM 模板中 -->
<my-component></my-component>



<!-- 在全部地方 -->
<my-component></my-component>

「多個 attribute 的元素應該分多行撰寫，每一個 attribute 一行。」

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>



<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

讓計算屬性更簡單

❝

當每一個計算屬性都包含一個很是簡單且不多依賴的表達式時，撰寫測試以確保其正確工做就會更加容易。

簡化計算屬性要求你爲每個值都起一個描述性的名稱，即使它不可複用。這使得其餘開發者 (以及將來的你) 更容易專一在他們關心的代碼上並搞清楚發生了什麼。

❞

讓 Computed 更精簡，直觀

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

指令縮寫

❝
動態綁定屬性 v-bind ======= ：

動態綁定事件 v-on ======= @

動態綁定插槽 v-slot ====== #

官方建議：要麼都用簡寫，要麼都用v- 開頭的，統一規範。
❞

<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>
      
<input
  @input="onInput"
  @focus="onFocus"
>  
      
      
      
綁定插槽
<template #header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>



<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template v-slot:footer>
  <p>Here's some contact info</p>
</template>

減小在 `scoped` 中使用元素選擇器

❝
在 scoped 樣式中，類選擇器比元素選擇器更好，由於大量使用元素選擇器是很慢的。
❞

❌不要這樣使用
<template>
  <button>X</button>
</template>

<style scoped>
button {
  background-color: red;
}
</style>





✔正確使用
<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
.btn-close {
  background-color: red;
}
</style>