全手打原創，轉載請標明出處：https://www.cnblogs.com/dreamsqin/p/10906951.html，多謝，=。=~
必要的：規避錯誤；
強烈推薦：改善可讀性和開發體驗；
推薦：多選擇情況下建議一個默認的選擇；
謹慎使用：照顧極端情況或幫助老代碼平穩遷移的vue特性；
以下包括Vue官網表示必要的和強烈推薦的
一、命名規范
1、組件名為多個單詞，除根組件App外——避免跟現有的以及未來的 HTML 元素沖突。
2、在插件、混入等擴展中始終為自定義的私有屬性使用 $_ 前綴（或使用模塊作用域，保證不允許外部訪問的函數的私有性）。通常為：
3、單文件組件的文件名要么是單詞大寫開頭 (PascalCase)，要么是橫線連接 (kebab-case)——單詞大寫開頭利於代碼編輯器的自動補全。
4、應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭，比如 Base、App 或 V——編輯器排序后基礎組件會全部列在一起，防止隨意選擇前綴，被頻繁使用放全局時相同前綴易於webpack打包。
5、只應該擁有單個活躍實例的組件（即每個頁面只使用一次該組件，它不接受prop）應該以 The 前綴命名，以示其唯一性——例如頭heading、導航欄sidebar。
6、和父組件緊密耦合的子組件應該以父組件名作為前綴命名（一個組件只在某個父組件的場景下有意義）——通常目錄嵌套的方法文件名相同時在編輯器中快速切換文件困難，過多嵌套的子目錄增加瀏覽組件所花的時間。
7、組件名中單詞的順序應該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結尾。比如：
8、組件名大小寫：對於絕大多數項目來說，在單文件組件和字符串模板中組件名應該總是 PascalCase 的——但是在 DOM 模板中總是 kebab-case 的（HTML 是大小寫不敏感的）。
ESLint：
{
"vue/component-name-in-template-casing": ["error", "kebab-case", {
"registeredComponentsOnly": false,
"ignores": []
}]
}
9、JS/JSX 中的組件名應該始終是 PascalCase 的，盡管在較為簡單的應用中只使用 Vue.component 進行全局組件注冊時，可以使用 kebab-case 字符串。
ESLint：
{
"vue/name-property-casing": ["error", "PascalCase"]
}
10、組件名應該傾向於完整單詞而不是縮寫。
11、prop名大小寫：在聲明 prop 的時候，其命名應該始終使用 camelCase，而在模板和 JSX 中應該始終使用 kebab-case。
ESLint：
{
"vue/prop-name-casing": ["error", "camelCase"]
}
PS：對於駝峰和橫線命名的選擇可以總體遵循：在 JavaScript 中是 camelCase，在 HTML 中則是 kebab-case。
二、其他
1、組件的 data 必須是一個函數，除了 new Vue 外的任何地方。
2、props定義盡量詳細。通常為：
ESLint：
{
"vue/require-prop-types": "error"
}
3、給v-for設置鍵值，與key結合使用，可以高效的更新虛擬DOM（使用數組中不會變化的那一項作為key值）。通常為：
ESLint：
{
"vue/require-v-for-key": "error"
}
4、不要把 v-if 和 v-for 用在同一個元素上——因為v-for 比 v-if 具有更高的優先級。
ESLint：
{
"vue/no-use-v-if-with-v-for": ["error", {
"allowUsingIterationVar": false
}]
}
5、為單文件組件樣式設置作用域，傾向於選用基於 class 的策略（css modules）而不是 scoped 特性。通常為：
6、把每個組件單獨拆分成文件，即一個組件為一個.vue文件。
7、在單文件組件、字符串模板和 JSX 中沒有內容的組件應該是自閉合的（自閉合組件表示它們不僅沒有內容，而且刻意沒有內容）——但在 DOM 模板里永遠不要這樣做。
8、多個特性的元素應該分多行撰寫，每個特性一行。通常為：
ESLint：
{
"vue/max-attributes-per-line": ["error", {
"singleline": 1,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}]
}
9、組件模板應該只包含簡單的表達式，復雜的表達式則應該重構為計算屬性或方法。例如：
10、應該把復雜計算屬性分割為盡可能多的更簡單的屬性——易於測試、閱讀、更好的“擁抱變化”（需求變更時重構量小）。例如：
11、非空 HTML 特性值應該始終帶引號 (單引號或雙引號，選你 JS 里不用的那個)。
12、指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 應該要么都用要么都不用。
ESLint：
{
"vue/v-bind-style": ["error", "shorthand"],
"vue/v-on-style": ["error", "shorthand"]
}
以下包括Vue官網表示推薦的
1、組件/實例的選項的順序
- name
- components
- mixins
- props
- data
- computed
- watch
- 生命周期鈎子 (按照它們被調用的順序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
- methods
ESLint：
{
"vue/order-in-components": ["error", {
"order": [
"el",
"name",
"parent",
"functional",
["delimiters", "comments"],
["components", "directives", "filters"],
"extends",
"mixins",
"inheritAttrs",
"model",
["props", "propsData"],
"data",
"computed",
"watch",
"LIFECYCLE_HOOKS",
"methods",
["template", "render"],
"renderError"
]
}]
}
2、元素/組件特性的順序
- v-for
- v-if
- v-else-if
- v-else
- v-show
- id
- ref
- key
- slot
- v-model
- 其他特性（所有普通的綁定或未綁定的特性）
- v-on
ESLint：
{
"vue/attributes-order": ["error", {
"order": [
"DEFINITION",
"LIST_RENDERING",
"CONDITIONALS",
"RENDER_MODIFIERS",
"GLOBAL",
"UNIQUE",
"TWO_WAY_BINDING",
"OTHER_DIRECTIVES",
"OTHER_ATTR",
"EVENTS",
"CONTENT"
]
}]
}
3、組件/實例選項中的空行
4、單文件組件頂級元素的順序
- <script>/* ... */</script>
- <template>...</template>
- <style>/* ... */</style>
或
- <template>...</template>
- <script>/* ... */</script>
- <style>/* ... */</style>
以下包括Vue官網表示謹慎使用的
1、沒有在 v-if/v-else-if/v-else 中使用 key；
2、元素選擇器在 scoped 中出現（盡可能選用類選擇器）；
3、隱性的父子組件通信（應該優先通過 prop 和事件進行父子組件之間的通信，而不是 this.$parent 或改變 prop，理想狀態是prop 向下傳遞，事件向上傳遞的）；
4、應該優先通過 Vuex 管理全局狀態，而不是通過 this.$root 或一個全局事件總線；
參考資料
vue官方風格指南：https://cn.vuejs.org/v2/style-guide/
eslint-plugin-vue：https://eslint.vuejs.org/rules/