Vue精簡版風格程式碼分享
- 小云云原創
- 2018-01-31 11:24:351669瀏覽
Vue官網的風格指南依照優先順序（依序為必要、強烈建議、推薦、謹慎使用）分類，且程式碼間隔較大，不易查詢。本文依照類型分類，並對部分範例或解釋進行縮減，是Vue風格指南的精簡版，本文主要介紹了Vue精簡版風格指南的相關資料，包括組件名稱，指令及特徵,需要的朋友可以參考下，希望能幫助大家。
元件名稱
【元件名為多個單字】（必要）
元件名稱應該永遠是多個單字的，根元件 App 除外。 這樣做可以避免跟現有的以及未來的HTML 元素相衝突，因為所有的HTML 元素名稱都是單字的
//bad
Vue.component('todo', {})
//good
Vue.component('todo-item', {})
【單檔案元件檔案名稱應該要麼始終是單字大寫開頭(PascalCase) ，要么始終橫線連接(kebab-case)】（強烈推薦）
//bad mycomponent.vue //good MyComponent.vue //good my-component.vue
【基礎組件名要有一個特定前綴開頭】（強烈建議）
應用特定樣式和約定的基礎元件(也就是展示類別的、無邏輯的或無狀態的元件) 應該全部以一個特定的前綴開頭，例如Base、App 或V
//bad components/ |- MyButton.vue |- VueTable.vue |- Icon.vue //good components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
【只應該擁有單一活躍實例的元件應該以The 前綴命名，以示其唯一性】（強烈建議）
這不意味著元件只可用於一個單頁面，而是每個頁面只使用一次，這些元件永遠不接受任何prop
//bad components/ |- Heading.vue |- MySidebar.vue //good components/ |- TheHeading.vue |- TheSidebar.vue
【和父元件緊密耦合的子元件應該以父元件名稱作為前綴命名】（強烈推薦）
//bad components/ |- TodoList.vue |- TodoItem.vue |- TodoButton.vue //good components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue
【元件名稱應該以高階的(通常是一般化描述的) 單字開頭，以描述性的修飾字結尾】（強烈推薦）
//bad components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue //good components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue
【單一檔案元件和字串範本中元件名應總是PascalCase－但在DOM範本中總是kebab-case 】（強烈建議）
//bad <!-- 在单文件组件和字符串模板中 --> <mycomponent/> <myComponent/> <!-- 在 DOM 模板中 --> <MyComponent></MyComponent> //good <!-- 在单文件组件和字符串模板中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
【元件名稱應該傾向於完整單字而不是縮寫】（強烈建議）
//bad components/ |- SdSettings.vue |- UProfOpts.vue //good components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue
元件相關
【單一檔案元件、字串模板和JSX中沒有內容的元件應該自閉合－但在DOM模板裡不要這樣做】（強烈建議）
自閉合元件表示它們不僅沒有內容，而且刻意沒有內容
//bad <!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent></MyComponent> <!-- 在 DOM 模板中 --> <my-component/> //good <!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
【為元件樣式設定作用域】（必要）
這條規則只和單一檔案元件有關。 不一定 要使用 scoped 特性。設定作用域也可以透過CSS Modules，或使用其它的函式庫或約定
//bad
<template><button class="btn btn-close">X</button></template>
<style>
.btn-close {background-color: red;}
</style>
//good
<template><button class="btn btn-close">X</button></template>
<style scoped>
.btn-close {background-color: red;}
</style>
//good
<template><button :class="[$style.button, $style.buttonClose]">X</button></template>
<style module>
.btn-close {background-color: red;}
</style>
【單一檔案元件應該總是讓