Vue3风格指南props 声明prop,使用小驼峰自定义事件名模板、声明都使用kebab-case 单文件组件文

props

声明prop,使用小驼峰

// 对于 SFC - 请确保您的大小写在整个项目中保持一致
// 您可以使用任一约定，但我们不建议混合两种不同的大小写样式

<WelcomeMessage greeting-text="hi"/>
// or
<WelcomeMessage greetingText="hi"/>

自定义事件名

模板、声明都使用kebab-case

单文件组件文件名大小写

单文件组件的文件名应始终采用 PascalCase 格式或 kebab-case 格式。

模板中的组件名称大小写

<!-- In Single-File Components and string templates -->
<MyComponent/>

<!-- In in-DOM templates -->
<my-component></my-component>

<!-- Everywhere -->
<my-component></my-component>

元素选择器`scoped`

元素选择器应避免使用scoped。

在样式中优先使用类选择器而不是元素选择器scoped，因为大量元素选择器会很慢。

坏的

<template>
  <button>×</button>
</template>

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

好的

<template>
  <button class="btn btn-close">×</button>
</template>

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

基础组件的命名约定

使用特定前缀（例如Base、App或V）来命名基础组件有助于将它们与其他类型的组件区分开来

紧密耦合的组件名称

与父组件紧密耦合的子组件应该包含父组件名称作为前缀。

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

组件名称中的单词顺序

组件名称应该以最高级别（通常是最通用的）词语开头，以描述性修饰词语结尾。

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

其他规范可以通过eslint插件实现

Vue3风格指南