组件的 data 必须是一个函数。

单文件组件文件名称

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。

mycomponent.vue
myComponent.vue
// good
my-component.vue
MyComponent.vue

紧密耦合的组件名

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

// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue
// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue

<!-- bad -->
<my-component></my-component>
<!-- good -->
<my-component />

Prop 名大小写

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

<!-- bad -->
<welcome-message greetingText="hi" />
<welcome-message greeting-text="hi" />

Props 换行

多个 Props 的元素应该分多行撰写，每个 Props 一行，闭合标签单起一行。

<!-- bad -->
<my-component foo="a" bar="b" baz="c" />
<!-- good -->
<my-component
  foo="a"
  bar="b"
/>

指令缩写，用 : 表示 v-bind: ，用 @ 表示 v-on:

<!-- bad -->
<input
  v-bind:value="value"
  v-on:input="onInput"
>
<!-- good -->
<input
  :value="value"
  @input="onInput"
>

Props 顺序

组件选项的顺序

组件选项应该有统一的顺序。

export default {
  name: '',
  mixins: [],
  components: {},
  props: {},
  data() {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {}
};

组件选项较多时，建议在属性之间添加空行。

export default {
  computed: {
    formattedValue() {
      // ...
    },
    styles() {
      // ...
    }
  },
  methods: {
    onInput() {
      // ...
    },
    onChange() {
      // ...
    }
  }
};

单文件组件顶级标签的顺序

单文件组件应该总是让顶级标签的顺序保持一致，且标签之间留有空行。

<template>
...
</template>
<script>
/* ... */
</script>
<style>