1. 命名风格

文件夹如果是由多个单词组成，应该始终是横线连接 (kebab-case)。

防止有些文件系统对大小写不敏感出现问题。

组件名应该始终由多个单词组成，除了根组件 App，以及 transition、component 之类的 Vue 内置组件。

这样做可以避免与现有以及未来的 HTML 元素产生冲突，因为所有的 HTML 元素名称都是单个单词的。

单文件组件的文件名始终是横线连接 (kebab-case)。

my-component.vue

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

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

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

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

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

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

2. 代码风格

在单文件组件中没有内容的组件应该是自闭合的。

<my-component />

始终以 key 配合 v-for。

永远不要在一个元素上同时使用 v-if 和 v-for。

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

props: {
  greetingText: String
}

<my-component greeting-text="hi" />

prop 的定义应该尽量详细，至少指定其类型。

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

应该把复杂计算属性尽可能多地分割为更简单的计算属性。

模板中使用双引号，js中使用单引号

<div class="wrapper"></div>

let str = 'hello!'

元素 (包括组件) 的 attribute 应该有统一的顺序。

定义：is
列表渲染：v-for
条件：v-if、v-else-if、v-else、v-show、v-cloak
ref、key
v-model
其他 Attribute
v-on：@
内容：v-html、v-text

<my-component
  is
  v-for="item in list"
  v-if="true"
  v-show="false"
  v-cloak="false"
  ref="myCom"
  :key="item.id"
  v-model="value"
  style
  class
  @click="handleItemClick"
  v-html="vHtml"
  v-text="text"
/>
<!-- 注意，有些属性是不允许同时出现的，此处只是为了更方便展示 -->

组件选项应该有统一的顺序。

name
components
provide/inject
inheritAttrs、 props、 emits、 expose
setup
data
computed
watch
生命周期事件：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeUnmount、unmounted、errorCaptured、renderTracked、renderTriggered
methods
template/render

参考链接：Vue3风格指南
 参考链接：Vant V3风格指南

1. 命名风格 #

2. 代码风格 #

1. 命名风格

2. 代码风格