PJCHENder 未整理筆記

[Vue] Style Guide

2017-10-24

@(Vue)

[Vue] 風格指南 Style Guide

Write at 2017/10/24 @ Vue Style Guide beta

必要遵守(避免錯誤發生)

元件命名:以多個單字命名元件

1
2
3
4
5
6
7
8
Vue.component('todo-item', {
// ...
})

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

元件數據:元件數據必須是函數

1
2
3
4
5
6
data: function () {
return {
listTitle: '',
todos: []
}
}

Prop 定義:Prop 定義應該儘量詳細

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// props 至少應該寫出 type 作為檢驗
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}

v-for: 總是用 key 配合 v-for

1
2
3
4
5
6
7
8
9
// 總是為 v-for 設立 key 值
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>

屬性命名規則

在 plugin、mixin 中的私有屬性始終使用 $_ 做為前綴。同時,為了迴避和其它作者的衝突,再附帶一個命名空間以 (比如 $__yourPluginName_):

1
2
3
4
5
methods: {
$_myNameSpace_update: function () {
// ...
}
}

強烈推薦(增加可讀性)

元件部分

把每一個元件獨立分檔

1
2
3
4
5
6
7
components/
|- TodoList.js
|- TodoItem.js

components/
|- TodoList.vue
|- TodoItem.vue

元件檔案命名規則

  • 檔名:使用 大寫駝峰(PascalCase)橫線連接(kebab-case)
1
2
3
4
5
components/
|- MyComponent.vue

components/
|- my-component.vue
  • 特定樣式、慣例的基礎元件:應該全部以一個特定的前綴開頭,比如 BaseApp V
1
2
3
4
5
6
7
8
9
10
11
12
13
14
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

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

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
  • 每頁只使用一次的元件:對於每個頁面只會使用一次的元件只應該擁有單個活躍實例的元件應該以 The 前綴命名,以示其唯一性,這些元件永遠不接受任何 prop:
1
2
3
components/
|- TheHeading.vue
|- TheSidebar.vue
  • 緊密耦合的元件:和父元件緊密耦合的子元件應該以父元件名作為前綴命名
1
2
3
4
5
6
7
8
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
  • 順序性:元件名應該以概念上層次較高、較普遍的單詞開頭,以描述性的修飾詞結尾:
1
2
3
4
5
6
7
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
  • 使用完整單詞而非縮寫:
1
2
3
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

元件在 JS/JSX 中命名規則

在 JS 中始終以**大寫駝峰(PascalCase)**為元件命名(例外,以 Vue.component 定義全局元件的方式應使用連接線 kebab-case )。

在 JavaScript 中,慣例上以大寫駝峰來為任何可以產生實例(instances)的類別(classes)或構造函數(prototype constructors)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Vue.component('MyComponent', {
// ...
})

Vue.component('my-component', {
// ...
})

import MyComponent from './MyComponent.vue'

export default {
name: 'MyComponent',
// ...
}

元件在模版中的命名規則

1
2
3
4
5
<!-- In single-file components, string templates, and JSX -->
<MyComponent/>

<!-- In DOM templates -->
<my-component></my-component>

使用自閉合元件

沒有內容的元件在 單文件元件(single-file components)、**字符串模板(String Template)**和 JSX 中應該是自閉合的——但在 DOM 模板裡永遠不要這樣做。

1
2
3
4
5
<!-- 在單文件元件、字符串模板和 JSX 中 -->
<MyComponent/>

<!-- 在 DOM 模板中 -->
<my-component></my-component>

Props 部分

Props 命名規則

  • 在聲明 prop 的時候,其命名應該始終使用 camelCase
  • 在模板(template)和 JSX 中應該始終使用 kebab-case
1
2
3
props: {
greetingText: String
}
1
<WelcomeMessage greeting-text="hi"/>

每個特性單獨一行

1
2
3
4
5
6
7
8
9
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
>
<MyComponent
foo="a"
bar="b"
baz="c"
/>

優先級 D 的規則:謹慎使用 (有潛在危險的模式)

盡可能在 v-if, v-else, v-if-else 中使用 key

1
2
3
4
5
6
<div v-if="error" key="search-status">
錯誤:{{ error }}
</div>
<div v-else key="search-results">
{{ results }}
</div>

元素選擇器應該避免在 scoped 中出現

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<button class="btn btn-close">X</button>
</template>


<style scoped>
/* 建議使用 .btn-close */
.btn-close {
background-color: red;
}

/* 不建議使用 HTML 元素選擇器,效能較差 */
button {
background-color: red;
}
</style>

參考

掃描二維條碼,分享此文章