Vue 3 script setup 默认按文件名推导组件名，需满足多单词PascalCase规范（如UserProfileCard.vue→UserProfileCard）；不满足时可用普通块显式声明name；模板中统一用PascalCase自闭合写法。

Vue 3 的 script setup 默认会根据文件名自动推导组件名，但要满足“多单词 + PascalCase”规范（如 UserProfileCard），关键在于文件命名和显式补充策略的配合——它本身不提供 name 选项，但有可靠替代路径。

文件名必须是多单词 PascalCase

这是最核心、最推荐的方式。Vue 会严格按 .vue 文件名生成组件名，且不接受连字符或小写开头：

• ✅ 正确：UserProfileCard.vue → 自动注册为 UserProfileCard
• ✅ 正确：SearchInputQuery.vue → 自动注册为 SearchInputQuery
• ❌ 错误：userprofilecard.vue → 推导为 userprofilecard（单词、小写，违反规范）
• ❌ 错误：user-profile-card.vue → 推导为 user-profile-card（含短横线，非 PascalCase）

需要自定义名称时：用第二个 <script></script> 块

当自动推导不符合需求（比如递归组件、调试需区分、或文件名受限于历史原因），可在同一文件中添加普通 <script></script> 块显式声明：

<script setup>
// 组合式逻辑
</script><script>
export default {
  name: 'CustomMultiWordName' // 必须是多单词 PascalCase，如 'UserProfileEditor'
}
</script>

注意：name 字段仍需遵守多单词规则（'UserProfile' ✅，'Profile' ❌），否则 ESLint 的 vue/multi-word-component-names 规则会报错。

Antd Vue Components

学习并查找 ant-design-vue（Vue 3）组件的使用方式，包括变体、运行示例、Vue 3 SFC 代码以及关键 props/events/slots。当用户询问如何使用 ant-design-vue 时使用。

下载

模板中使用时保持 PascalCase 自闭合写法

即使组件名是多单词，模板中也应统一用 PascalCase 标签，并推荐自闭合：

• ✅
• ✅
• ❌ （易与原生标签混淆，不推荐）

在 DOM 模板中（如直接挂载到 index.html）才需转为 kebab-case；SFC 内部始终用 PascalCase。

基础组件和业务组件的命名提示

为增强语义和团队协作，可叠加前缀策略，但仍保持多单词结构：

• 基础组件：以 Base 开头，如 BaseButton.vue → BaseButton
• 业务耦合组件：用父名前缀，如 OrderDetailItem.vue → OrderDetailItem
• 避免缩写：用 UserProfile 而非 UsrProf，用 ImageGallery 而非 ImgGal

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！