1. 组件文件名称

• 使用PascalCase风格，单词大写开头；
• 紧密耦合的组件名，与父组件紧密耦合的子组件应该以父组件名作为前缀命名。

推荐

├── components
│   |── todo
│   │   |── TodoIndex.vue
│   │   |── TodoList.vue
│   │   |── TodoListItem.vue
│   │   |── TodoListItemButton.vue        

不推荐

├── components
│   |── todo
│   │   |── Index.vue
│   │   |── TodoList.vue
│   │   |── TodoItem.vue
│   │   |── TodoButton.vue

或者
├── components
│   |── todo
│   │   |── index.vue
│   │   |── todo-list.vue
│   │   |── todo-list-item.vue
│   │   |── todo-list-item-button.vue        

2. 组件顶级标签的顺序

template -> script -> style，且标签之间留有空行。

<template>
......
</template>

<script>
......
</script>

<style scoped>
......
</style>

3. 自闭合组件

无内容 的组件应该是自闭合的。

<!-- 推荐 -->
<MyComponent />
<my-component />

<!-- 不推荐 -->
<my-component></my-component>
<MyComponent></<MyComponent>

4. Prop 定义

• 命名：在声明 props 的时候，命名使用camelCase，在模板中也使用camelCase；
• 定义：尽量详细，至少需要指定其类型和默认值。

推荐

<template>
    <MyComponent greetingText="hi" userId="1" />
</template>

<script>
export default {
    props: {
        userId: {
            type: [String, Number],
            required: true,
            default: ''
        },
        greetingText: {
            type: String,
            default: 'Hello PSI'
        }
    }
}
</script>

不推荐

<template>
    <MyComponent greeting-text="hi" user-id="1" />
</template>

<script>
export default {
    props: {
        userId: [String, Number],
        'greeting-text': String
    }
    // 或者
    props: ['userId', 'greetingText']
}
</script>

5. 组件选项的顺序

先后顺序：扩展 -> 数据 -> 资源 -> 生命周期 -> 方法。

export default {
  name: '',
  /* (1) 扩展 */
  inject: [],
  extends: '',
  mixins: [],
  components: {},

  /* (2) 数据 */
  props: {},
  model: { prop: '', event: '' },
  data() {},
  computed: {},
  watch: {},

  /* (3) 资源 */
  filters: {},
  directives: {},

  /* (4) 生命周期 */
  beforeRouteEnter(to, from, next) {},
  created() {},
  mounted() {},
  destroyed() {},

  /* (5) 方法 */
  methods: {}
}