规范

1. 组件名为多个单词

组件名应该始终是多个单词的，根组件 App 除外。

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)

export default {
name: 'TodoItem',
// ...
}

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

    export default {
    data () {
        return {
        foo: 'bar'
        }
    }
    }

3. Prop 定义应该尽量详细

    props: {
    status: String
    }
    // 更好的做法！
    props: {
    status: {
        type: String,
        required: true,
        validator: function (value) {
        return [
            'syncing',
            'synced',
            'version-conflict',
            'error'
        ].indexOf(value) !== -1
        }
    }
    }

反例：

    // 这样做只有开发原型系统时可以接受
    props: ['status']

4. 为v-for设置键值key

在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

5. 为组件样式设置作用域

对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。
这条规则只和单文件组件有关。你不一定要使用 scoped 特性。设置作用域也可以通过 CSS Modules，那是一个基于 class 的类似 BEM 的策略，当然你也可以使用其它的库或约定。
不管怎样，对于组件库，我们应该更倾向于选用基于 class 的策略而不是 scoped 特性
这让覆写内部样式更容易：使用了常人可理解的 class 名称且没有太高的选择器优先级，而且不太会导致冲突。

<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>

<!-- 使用 CSS Modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>

<!-- 使用 BEM 约定 -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

6. 模板中使用简单的表达式，复杂的应该用计算属性

{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}

{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}