基于Vue官方風格指南整理
一、強制
1. 組件名為多個單詞
組件名應該始終是多個單詞的，根組件 App 除外。
正例：
export default { name: TodoItem, // ... } 復制代碼反例：
export default { name: Todo, // ... } 復制代碼2. 組件數據
組件的 data 必須是一個函數。
當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數。
正例：
// In a .vue file export default { data () { return { foo: bar } } } // 在一個 Vue 的根實例上直接使用對象是可以的， // 因為只存在一個這樣的實例。 new Vue({ data: { foo: bar } }) 復制代碼反例：
export default { data: { foo: bar } } 復制代碼3. Prop定義
Prop 定義應該盡量詳細。
在你提交的代碼中，prop 的定義應該盡量詳細，至少需要指定其類型。
正例：
props: { status: String } // 更好的做法！ props: { status: { type: String, required: true, validator: function (value) { return [ syncing, synced, version-conflict, error ].indexOf(value) !== -1 } } } 復制代碼反例：
// 這樣做只有開發(fā)原型系統(tǒng)時可以接受 props: [status] 復制代碼
4. 為v-for設置鍵值
總是用 key 配合 v-for。
在組件上_總是_必須用 key 配合 v-for，以便維護內部組件及其子樹的狀態(tài)。甚至在元素上維護可預測的行為，比如動畫中的對象固化 (object constancy)，也是一種好的做法。
正例：
復制代碼
反例：
復制代碼
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)。
正例：
復制代碼
反例：
復制代碼
6. 為組件樣式設置作用域
對于應用來說，頂級 App 組件和布局組件中的樣式可以是全局的，但是其它所有組件都應該是有作用域的。
這條規(guī)則只和單文件組件有關。你不一定要使用 scoped 特性。設置作用域也可以通過 CSS Modules，那是一個基于 class 的類似 BEM 的策略，當然你也可以使用其它的庫或約定。不管怎樣，對于組件庫，我們應該更傾向于選用基于 class 的策略而不是 scoped 特性。
這讓覆寫內部樣式更容易：使用了常人可理解的 class 名稱且沒有太高的選擇器優(yōu)先級，而且不太會導致沖突。
正例：
復制代碼
反例：
復制代碼
二、強烈推薦（增強可讀性）
1. 組件文件
只要有能夠拼接文件的構建系統(tǒng)，就把每個組件多帶帶分成文件。
當你需要編輯一個組件或查閱一個組件的用法時，可以更快速的找到它。
正例：
components/ |- TodoList.vue |- TodoItem.vue 復制代碼
反例：
Vue.component(TodoList, { // ... }) Vue.component(TodoItem, { // ... }) 復制代碼2. 單文件組件文件的大小寫
單文件組件的文件名應該要么始終是單詞大寫開頭 (PascalCase)
正例：
components/ |- MyComponent.vue 復制代碼
反例：
components/ |- myComponent.vue |- mycomponent.vue 復制代碼
3. 基礎組件名
應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態(tài)的組件) 應該全部以一個特定的前綴開頭，比如 Base、App 或 V。
正例：
components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue 復制代碼
反例：
components/ |- MyButton.vue |- VueTable.vue |- Icon.vue 復制代碼
4. 單例組件名
只應該擁有單個活躍實例的組件應該以 The 前綴命名，以示其唯一性。
這不意味著組件只可用于一個單頁面，而是每個頁面只使用一次。這些組件永遠不接受任何 prop，因為它們是為你的應用定制的，而不是它們在你的應用中的上下文。如果你發(fā)現(xiàn)有必要添加 prop，那就表明這實際上是一個可復用的組件，只是目前在每個頁面里只使用一次。
正例：
components/ |- TheHeading.vue |- TheSidebar.vue 復制代碼
反例：
components/ |- Heading.vue |- MySidebar.vue 復制代碼
5. 緊密耦合的組件名
和父組件緊密耦合的子組件應該以父組件名作為前綴命名。
如果一個組件只在某個父組件的場景下有意義，這層關系應該體現(xiàn)在其名字上。因為編輯器通常會按字母順序組織文件，所以這樣做可以把相關聯(lián)的文件排在一起。
正例：
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue 復制代碼
反例：
components/ |- SearchSidebar.vue |- NavigationForSearchSidebar.vue 復制代碼
6. 組件名中的單詞順序
組件名應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。
正例：
components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue 復制代碼
反例：
components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue 復制代碼
7. 模板中的組件名大小寫
總是 PascalCase 的
正例：
反例：
8. 完整單詞的組件名
組件名應該傾向于完整單詞而不是縮寫。
正例：
components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue 復制代碼
反例：
components/ |- SdSettings.vue |- UProfOpts.vue 復制代碼
9. 多個特性的元素
多個特性的元素應該分多行撰寫，每個特性一行。
正例：
[object Object]
反例：
[object Object]
10. 模板中簡單的表達式
組件模板應該只包含簡單的表達式，復雜的表達式則應該重構為計算屬性或方法。
復雜表達式會讓你的模板變得不那么聲明式。我們應該盡量描述應該出現(xiàn)的是什么，而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。
正例：
{{ normalizedFullName }} // 復雜表達式已經移入一個計算屬性 computed: { normalizedFullName: function () { return this.fullName.split( ).map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join( ) } } 復制代碼反例：
{{ fullName.split( ).map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join( ) }} 復制代碼11. 簡單的計算屬性
正例：
computed: { basePrice: function () { return this.manufactureCost / (1 - this.profitMargin) }, discount: function () { return this.basePrice * (this.discountPercent || 0) }, finalPrice: function () { return this.basePrice - this.discount } } 復制代碼反例：
computed: { price: function () { var basePrice = this.manufactureCost / (1 - this.profitMargin) return ( basePrice - basePrice * (this.discountPercent || 0) ) } } 復制代碼12. 帶引號的特性值
非空 HTML 特性值應該始終帶引號 (單引號或雙引號，選你 JS 里不用的那個)。
在 HTML 中不帶空格的特性值是可以沒有引號的，但這樣做常常導致帶空格的特征值被回避，導致其可讀性變差。
正例：
反例：
13. 指令縮寫
都用指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:)
正例：
[object Object]復制代碼
反例：
[object Object]復制代碼
三、推薦
1. 單文件組件的頂級元素的順序
單文件組件應該總是讓
