命名约定

我们挑选了一些基础命名约定来规范我们的代码，如果您想看全部的风格指南，请移步，Vue.js风格指南

组件名为多个单词

组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

// 反例
export default {
  name: 'Todo',
  // ...
}

// 好例子
export default {
  name: 'TodoItem',
  // ...
}

单文件组件文件的大小写

单文件组件的文件名应该是小写横线连接 (kebab-case)。

// 反例
|- components
  |- mycomponent.vue
|- components
  |- myComponent.vue

// 好例子
|- components
    |- my-component.vue

基础组件名

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

// 反例
|- components
    |- MyButton.vue
    |- VueTable.vue
    |- Icon.vue

// 好例子
|- components
  |- base-button.vue
  |- base-table.vue
  |- base-icon.vue
|- components
  |- app-button.vue
  |- app-table.vue
  |- app-icon.vue
|- components
  |- v-button.vue
  |- v-table.vue
  |- v-icon.vue

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

// 反例
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

// 好例子
|- components
    |- todo-list.vue
    |- todo-list-item.vue
    |- todo-list-item-button.vue
|- components
    |- search-sidebar.vue
    |- search-sidebar-navigation.vue

组件名中的单词顺序（名词+动词）

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

// 反例
|- components
  |- ClearSearchButton.vue
  |- ExcludeFromSearchInput.vue
  |- LaunchOnStartupCheckbox.vue
  |- RunSearchButton.vue
  |- SearchInput.vue
  |- TermsCheckbox.vue

// 好例子
|- components
  |- search-button-clear.vue
  |- search-button-run.vue
  |- search-input-query.vue
  |- search-input-exclude-glob.vue
  |- settings-checkbox-terms.vue
  |- settings-checkbox-launch-on-startup.vue

模板中的组件名大小写

模板中的组件名是小写横线连接 (kebab-case)。

// 反例
<mycomponent/>
<myComponent/>

// 好例子
<my-component></my-component>

完整单词的组件名

组件名应该倾向于完整单词而不是缩写。

// 反例
|- components
  |- SdSettings.vue
  |- UProfOpts.vue

// 好例子
|- components
  |- student-dashboard-settings.vue
  |- user-profile-options.vue