(一) Vue 编码基础
vue 项目规范以 Vue 官方规范（https://cn.vuejs.org/v2/style-guide/）[3] 中的 A 规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。
请仔细阅读 Vue 官方规范，切记，此为第一步。
2.1.1 组件规范
1) 组件名为多个单词。
组件名应该始终由多个单词组成，且命名规范为KebabCase格式。这样做可以避免与现有和未来的 HTML 元素冲突，因为所有 HTML 元素名称都是由单个单词组成的。
正例：
export default { name: 'TodoItem' };
反例：
export default { name: 'Todo' }; export default { name: 'todo-item' };
2) 组件文件名为 PascalCase 格式
正例：
components/ |- MyComponent.vue
反例：
components/ |- myComponent.vue |- MyComponent.vue
3) 基础组件文件名以 base 开头，使用完整单词而不是缩写。
正例：
components/ |- base-button.vue |- base-table.vue |- base-icon.vue
反例：
components/ |- MyButton.vue |- VueTable.vue |- Icon.vue
4) 和父组件紧密耦合的子组件应该以父组件名作为前缀命名
正例：
components/ |- todo-list.vue |- todo-list-item.vue |- todo-list-item-button.vue |- user-profile-options.vue （完整单词）
反例：
components/ |- TodoList.vue |- TodoItem.vue |- TodoButton.vue |- UProfOpts.vue （使用了缩写）
5) 在 Template 模板中使用组件，应使用 PascalCase 格式，并使用自闭合组件。
正例：
<MyComponent /> <Row><table :column="data"/></Row>
反例：
<my-component /> <row><table :column="data"/></row>
6) 组件的 data 必须是一个函数
当在组件中使用 data 属性时（除了 new Vue 外的任何地方），它的值必须是一个返回对象的函数。因为如果直接是一个对象，子组件之间的属性值会相互影响。
正例：
export default { data () { return { name: 'jack' } } } • 1
反例：
export default { data: { name: 'jack' } }
7) Prop 定义应该尽量详细
- 必须使用 camelCase 驼峰命名
- 必须指定类型
- 必须加上注释，表明其含义
- 必须加上 required 或者 default，两者二选其一
- 如果有业务需要，必须加上 validator 验证
正例：
props: { status: { type: String, required: true, validator: function (value) { return [ 'succ', 'info', 'error' ].indexOf(value) !== -1 } }, userLevel: { type: String, required: true } }
8) 为组件样式设置作用域
正例：
<template> <button class="btn btn-close">X</button> </template> <style scoped> .btn-close { background-color: red; } </style>
反例：
<template> <button class="btn btn-close">X</button> </template> <style> .btn-close { background-color: red; } </style>
9) 如果特性元素较多，应主动换行。
正例：
<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" />
反例：
<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar=
