这是官方指南

必要的

• 组件名应该始终是多个单词的，根组件 App 除外
• props 的定义应该尽量详细，至少需要指定其类型
  props: { status: String } // 更好的做法！ props: { status: { type: String, required: true, validator: function (value) { return [ 'syncing', 'synced', 'version-conflict', 'error' ].indexOf(value) !== -1 } } }
• 使用v-for时要设置key
• 不要把 v-if 和 v-for 同时用在同一个元素上
• 应为组件样式设置作用域，更倾向于使用class来约束作用域而不是scoped

• 在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $yourPluginName)

  强烈推荐

• 指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 应该要么都用要么都不用
• 单文件组件应该总是让 <script>、<template> 和 <style> 标签的顺序保持一致。且 <style> 要放在最后，另外两个标签至少要有一个
• 组件如果可以分解，应尽可能低往下划分
• 单文件组件的文件名要么是开头大写（PascalCase），要么是横线连接（kebab-case）
• 组件名应该倾向于完整单词而不是缩写

• 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾

  反例
  
  components/
  |- ClearSearchButton.vue
  |- ExcludeFromSearchInput.vue
  |- LaunchOnStartupCheckbox.vue
  |- RunSearchButton.vue
  |- SearchInput.vue
  |- TermsCheckbox.vue
  好例子
  
  components/
  |- SearchButtonClear.vue
  |- SearchButtonRun.vue
  |- SearchInputQuery.vue
  |- SearchInputExcludeGlob.vue
  |- SettingsCheckboxTerms.vue
  |- SettingsCheckboxLaunchOnStartup.vue

• 和父组件紧密耦合的子组件应该以父组件名作为前缀命名

  components/
  |- TodoList.vue
  |- TodoListItem.vue
  |- TodoListItemButton.vue
  components/
  |- SearchSidebar.vue
  |- SearchSidebarNavigation.vue

• 多个特性的元素应该分多行撰写，每个特性一行

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

• 基础组件（展示类的、无逻辑的或无状态的组件）应全部以特定的前缀开头，如：BaseButton，BaseTable
• 只拥有单个活跃实例的组件应以The前缀开头，以显示其唯一性,这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop
• 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做
• JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串

• 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case

  props: {
  greetingText: String
  }
  <WelcomeMessage greeting-text="hi"/>

• 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法

• 应该把复杂计算属性分割为尽可能多的更简单的属性。
  ```
  //反例
  computed: {
  price: function () {
  var basePrice = this.manufactureCost / (1 - this.profitMargin)
  return (
  basePrice -
  basePrice * (this.discountPercent || 0)
  )
  }
  }

//正例
computed: {
basePrice: function () {
return this.manufactureCost / (1 - this.profitMargin)
},
discount: function () {
return this.basePrice * (this.discountPercent || 0)
},
finalPrice: function () {
return this.basePrice - this.discount
}
}
```

谨慎使用

• 在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的
• 应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop。
• 应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线