Vue vue推荐的风格指南

优先级A的规则：必要的（规避错误）

1. 组件名为多个单词,这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的
2. 组件的 data 必须是一个函数
3. Prop 定义应该尽量详细,至少包含类型
4. 总是用 key 配合 v-for
5. 避免 v-if 和 v-for 用在一起
6. 为组件样式设置作用域,使用scoped或Modules或class,更倾向于选用基于 class 的策略

优先级B的规则：强烈推荐 (增强可读性)

1. 只要有能够拼接文件的构建系统，就把每个组件单独分成文件。（使用单文件组件，不推荐使用Vue.component）
2. 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
   例如：

components/
|- MyComponent.vue
components/
|- my-component.vue

3. 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

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

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

5. Prop 名大小写强烈推荐。在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是kebab-case。

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

6. 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

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

7. 多个 attribute 的元素应该分多行撰写，每个 attribute 一行。

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>