your

Here is the official guide

necessary

• Component names should always be multiple words, except the root component App
• The definition of props should be as detailed as possible, at least by specifying its type
  props: { status: String } // 更好的做法！ props: { status: { type: String, required: true, validator: function (value) { return [ 'syncing', 'synced', 'version-conflict', 'error' ].indexOf(value) !== -1 } } }
• Set key when using v-for
• Don't use both v-if and v-for on the same element
• Component styles should be scoped, prefer class to constrain scope rather than scoped

• Always use the $_ prefix for custom private properties in extensions such as plugins, mixins, etc. And attach a namespace to avoid conflicts with other authors (eg $ yourPluginName )

  highly recommended

• Instruction abbreviations (use : for v-bind: and @ for v-on: ) should either be used or neither should be used
• Single-file components should always keep the <script>, <template>and <style>tags in the same order. and <style>to be at the end, at least one of the other two tags
• If components can be decomposed, they should be divided as low as possible
• Single-file component filenames are either capitalized (PascalCase) or dashed (kebab-case)
• Component names should prefer full words rather than abbreviations

• Component names should start with a high-level (usually generalized) word and end with a descriptive modifier

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

• Subcomponents that are tightly coupled to their parent should be named with the parent's name as a prefix

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

• Elements with multiple attributes should be written on multiple lines, one for each attribute

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

• Base components (presentational, logicless or stateless components) should all start with a specific prefix, eg: BaseButton, BaseTable
• Components that only have a single active instance should start with The prefix to show their uniqueness, this does not mean that the component can only be used on a single page, but only once per page. These components never accept any props
• Components without content in single-file components, string templates and JSX should be self-closing - but never in DOM templates
• Component names in JS/JSX should always be PascalCase, although kebab-case strings can be used in simpler applications where only Vue.component is used for global component registration

• When declaring props, its naming should always use camelCase, and in templates and JSX should always use kebab-case

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

• Component templates should only contain simple expressions, complex expressions should be refactored into computed properties or methods

• Complex computed properties should be split into as many simpler properties as possible.
  ```
  //Counter example
  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
}
}
```

Use with caution

• In scoped style, class selectors are better than element selectors, because heavy use of element selectors is slow
• Communication between parent and child components should be done via props and events in preference to this.$parent or changing props.
• Global state should be managed via Vuex in preference to this.$root or a global event bus