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 规则会报错。

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

立即学习“前端免费学习笔记（深入）”；

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

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

• ✅ <userprofilecard></userprofilecard>
• ✅ <searchinputquery :query="q"></searchinputquery>
• ❌ <user-profile-card></user-profile-card>（易与原生标签混淆，不推荐）

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

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

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

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