vue項目開發規範總結

時間 2019-11-08

標籤 vue 項目開發規範總結简体版

原文原文鏈接

強制執行的：

文件名要爲多個單詞，且語義明確，同時要爲大寫駝峯javascript

組件名應該始終是多個單詞的，根組件 App 以及、之類的 Vue 內置組件除外。css

反例：html
```
Vue.component('todo', {
  // ...
})
複製代碼
```
好例：vue
```
export default {
  name: 'TodoItem',
  // ...
}
複製代碼
```

組件數據data必須爲一個函數java

反例：ide

export default {
  data: {
    foo: 'bar'
  }
}
複製代碼

好例：函數

export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}
複製代碼

props的定義必定要詳盡，例如類型、必填項、默認值、校驗規則佈局

反例：ui

props: ['status']
複製代碼

好例：this

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}
複製代碼

v-for設置key值

反例：

<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>
複製代碼

避免v-if和v-for用一塊兒

**永遠不要把 v-if 和 v-for 同時用在同一個元素上。**當 Vue 處理指令時，v-for 比 v-if 具備更高的優先級。

反例：

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

好例：

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

爲組件樣式設置做用域

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

反例：

<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>
複製代碼

使用私有屬性名

反例：

var myGreatMixin = {
  // ...
  methods: {
    update: function () {
      // ...
    }
  }
}
複製代碼

好例：

var myGreatMixin = {
  // ...
  methods: {
   	$_update: function () {
      // ...
    }
  }
}
複製代碼

推薦執行的

基礎文件名

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

反例：
```
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
複製代碼
```
好例：
```
components/
|- BaseButton.vue
|- AppTable.vue
|- VIcon.vue
複製代碼
```
單例組件名

只應該擁有單個活躍實例的組件應該以 The 前綴命名，以示其惟一性。

反例：
```
components/
|- Heading.vue
|- MySidebar.vue
複製代碼
```
好例：
```
components/
|- TheHeading.vue
|- TheSidebar.vue
複製代碼
```

自閉合組件

在單文件組件、字符串模板和 JSX 中沒有內容的組件應該是自閉合的——但在 DOM 模板裏永遠不要這樣作。

反例：

<!-- 在單文件組件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
複製代碼

好例：

<!-- 在單文件組件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
複製代碼

模板中組件名大小寫

對於絕大多數項目來講，在單文件組件和字符串模板中組件名應該老是 PascalCase 的——可是在 DOM 模板中老是 kebab-case 的。

反例：

<!-- 在單文件組件和字符串模板中 -->
<mycomponent/>
<!-- 在單文件組件和字符串模板中 -->
<myComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>
複製代碼

好例：

<!-- 在單文件組件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
或者
<!-- 在全部地方 -->
<my-component></my-component>
複製代碼

模板中簡單的表達式

組件模板應該只包含簡單的表達式，複雜的表達式則應該重構爲計算屬性或方法。

反例：

{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}
複製代碼

好例：

<!-- 在模板中 -->
{{ normalizedFullName }}

// 複雜表達式已經移入一個計算屬性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}
複製代碼

簡單的計算屬性

應該把複雜計算屬性分割爲儘量多的更簡單的屬性。

反例：

computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}
複製代碼

好例：

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

帶引號的特性值

非空 HTML 特性值應該始終帶引號 (單引號或雙引號，選你 JS 裏不用的那個)。

反例：

<input type=text>
<AppSidebar :style={width:sidebarWidth+'px'}>
複製代碼

好例：

<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">
複製代碼

指令縮寫

指令縮寫 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 應該要麼都用要麼都不用。

反例：

<input v-bind:value="newTodoText" :placeholder="newTodoInstructions" >
<input v-on:input="onInput" @focus="onFocus" >
<template v-slot:header>
  <h1>Here might be a page title</h1> 
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>
複製代碼

好例：

<input :value="newTodoText" :placeholder="newTodoInstructions" >
<input v-bind:value="newTodoText" v-bind:placeholder="newTodoInstructions" >
<input @input="onInput" @focus="onFocus" >
<input v-on:input="onInput" v-on:focus="onFocus" >
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。