優先度B：強烈推薦

Component目錄層級

• 要建立Component的目錄，每個Component都要放在相關的目錄層底下。
• 可以在開發或查詢時，能夠快速搜尋。

E.G.
components/
     TodoList.js
     TodoItem.js

components/
     TodoList.vue
     TodoItem.vue

Component命名規則

• Component名稱命名規則應用PascalCase/kebab-case。
• 使用PascalCase最為友好，因為這讓我們在JS/JS(X)和模板中引用Component的方式盡可能的一致。
• 但如果檔案名稱混合英文大小寫的話，容易導致大小寫不敏感的系統無法辨識，這時使用kebab-case會顯得更清楚。

E.G.
components/
|- MyComponent.vue

components/
|- my-component.vue

底層Component命名

• 建立底層Component，命名應該要無邏輯、無狀態，要用特定名稱當做開頭。
  e.g. Base、App 或 V 。
• 這樣Component檔案在排序時，基礎元件會全部列在一起，更容易識別。

E.G.
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

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

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

單例Component命名

• 只有單一個Component在運作，命名開頭應該要用The，來表示只有一個。
• 這意味著不是只有一個頁面可使用，而是每一個頁面只能使用一次，這個component不會接收任何props變數，因為他是特定的，如果使用props的話，代表這個Component是可以被複用的(此Component是單一的)。

E.G.
components/
|- TheHeading.vue
|- TheSidebar.vue

Component命名順序

• 命名方式最看到是通用的單字當頭，以描述來修飾結尾。
• 通常都是第一個單字Component的主題，後面才會接形容主題要做的事情。
• 元件名應該以高層級的(通常是概念化) 單詞開頭，以描述性的修飾詞結尾

E.G.
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

自閉合Component

• 在元件、字符串模板和JSX中，沒有內容的元件應該是自閉合的。
• HTML並不支持自閉合的自定義元素，因此在DOM模板中不能使用自閉合寫法(<MyComponent/>)，只能用在元件、字符串模板和JSX中。

E.G.
<!-- In single-file components, string templates, and JSX -->
<MyComponent/>

<!-- In DOM templates (HTML Blade) -->
<my-component></my-component>

模板中Component命名規則

• 大部分的單一Component或模板都是用PascalCase，不過在DOM模板中卻是用kebab-case。
• PascalCase與kebab-case相比之下有優勢：
  1. 在模板裡PascalCase適用於kebab-case。
  2. <MyComponent>與<my-Component>，看起容易區分HTML元素，因前者不同處有兩個大寫英文字母，後者只有一條橫線。
  3. 如果是模板中使用非Vue自訂的元素，例如：Web Component，PascalCase確保在Vue Component容易識別。
• 由於HTML不分大小寫，在DOM模板必須使用kebab-case。
• 注意，如果是長期使用PascalCase，在HTML保持一致的命名規則很重要。這種情形下，所有的地方都要使用PascalCase是可以接受的，但是命名的意義極為重要。

E.G.
<!-- In single-file components and string templates -->
<MyComponent/>

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

<!-- Everywhere -->
<my-Component></my-Component>

JS/JSX的Component命名規則

• JS/JSX中的component命名方式是以PascalCase為主。
• 儘管在Vue全域變數中，執行簡單的邏輯，但是在字串中還是用kebab-case來命名。

E.G.
Vue.component('MyComponent', {
  // ...
})

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

import MyComponent from './MyComponent.vue'

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

完整單字Component名稱

• component名稱應該是完整的單字，不應該是英文簡寫。
• 程式碼中限制命名長度的已經很低了，不常用的就不要簡寫。
• 定義完整的Component名稱，能夠一目了然其作用。

E.G.
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

prop名稱大小寫

• 在定義prop名稱時，就應該用camelCase，而模本和JSX中用kebab-case。
• 我們必須遵循每個語言的規範，在JavaScript是使用camelCase。而HTML則是用kebab-case。
• Vue規範強制規定prop名稱要用camelCase。

E.G.
props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/>

多個屬性元素

• 多個屬性元素就應該換行，每一個屬性一行。
• 在JavaScript中，用多行來區分多個屬性是很常見的，因為這樣容易閱讀，模板和JSX建議用相同的做法。
• 當頁面上有多個元素中又帶多個屬性，就沒有必要每一個屬性一行，以整個頁面來看，會增加閱讀困難。

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

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

板模中簡單的表達式

• Component的模板中有簡單的表達式，e.g. computed, methods。
• 複雜的表達式只會讓板模看起來很不好用，我們應該正確的描述計算的方式，而不是如何計算。而且計算屬性或function要可以複用。

E.G.
<!-- In a template -->
{{ normalizedFullName }}

// The complex expression has been moved to a computed property
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

簡單的computed寫法

• 一個複雜的computed，應該用盡可能分割成多個簡單的computed，這樣function使用起來比較彈性，也比較好維護。
• 容易測試
• 容易閱讀
• 小、專注的computed會減少了訊息使用時的假設性限制，所以需求變更時也用不著那麼多重構了

E.G.
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的屬性值，要用引號(單引號或雙引號)。
• 在HTML中的屬性值，是不能沒有引號的，也不要用空格，為了方便閱讀程式碼。

E.G.
<input type="text">

<AppSidebar :style="{ width: sidebarWidth + 'px' }">

指令縮寫

• 指令縮寫
  1. 【:】 表示v-bind:
  2. 【@】 表示v-on:
  3. 【#】 表示v-slot:

E.G.
<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"
>

<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>

<template #header>
  <h1>Here might be a page title</h1>
</template>

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

明天將會繼續來看Style Guide剩餘的部分！

Resource
Vue.js style-guide