Vue 3 的 无内置命名空间，但可通过导入别名、PascalCase 文件命名、defineOptions({ name }) 显式声明及组件前缀策略规避冲突。
Vue 3 的 <script setup></script> 本身不提供命名空间机制，但可通过导入别名、文件命名规范和组件注册策略有效规避冲突、简化使用。
用 import 别名明确区分同名组件
当多个路径下存在同名组件（如 UserCard.vue 在 @/components/admin/ 和 @/components/profile/ 中都存在），直接导入会覆盖或报错：
- 显式添加别名，避免变量名冲突：
import AdminUserCard from '@/components/admin/UserCard.vue'<br>import ProfileUserCard from '@/components/profile/UserCard.vue'
- 模板中即可清晰调用：
<adminusercard></adminusercard><profileusercard></profileusercard> - 别名建议采用语义化前缀（
Admin、Profile、Legacy），而非简单用A或B，便于团队理解
统一文件名与组件名，减少推断歧义
<script setup></script> 默认按文件名推导组件名（如 StatisticCard.vue → StatisticCard）。若文件名含连字符（statistic-card.vue），推导结果为 statisticCard（camelCase），易与 PascalCase 组件产生匹配冲突。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 推荐所有 .vue 文件使用 PascalCase 命名：
UserDialog.vue、DataFilter.vue，而非user-dialog.vue - 这样导入后变量名自然一致：
import UserDialog from './UserDialog.vue'→ 模板中写<userdialog></userdialog> - 若必须用 kebab-case 文件名（如对接旧构建流程），请在
defineOptions({ name: 'UserDialog' })中显式声明，确保运行时名称唯一
配合 defineOptions 控制组件暴露名
组件名不仅影响模板标签，还关系到 <keep-alive></keep-alive> 缓存、DevTools 显示和错误定位。默认推导有时不够精准，尤其在递归或跨包场景。
立即学习“前端免费学习笔记（深入）”；
- 用
defineOptions显式固定名称：defineOptions({ name: 'UserProfileCard' }) - 该名称会作为组件的
name选项参与 Vue 内部注册表匹配，避免因文件重命名或路径变化导致的隐性冲突 - 搭配插件
vite-plugin-vue-setup-extend可直接在 script 标签上写<script setup name="UserProfileCard"></script>，更简洁
大型项目建议启用组件前缀隔离
当项目集成多个 UI 库（如 Element Plus、PrimeVue）或存在通用业务组件库时，全局注册易引发标签名碰撞。
- 对第三方库统一加前缀：
app.use(ElementPlus, { size: 'default', zIndex: 2000 })配合 CSS 类前缀；或使用componentPrefix（如 PrimeVue 支持） - 自研业务组件库可约定命名前缀：
<bizusertable></bizusertable>、<bizpermissionbadge></bizpermissionbadge>，从源头杜绝与原生 HTML 标签或社区组件同名 - 构建时扫描脚本可检测所有
defineOptions({ name })和app.component()注册项，自动报告潜在的 kebab/camel/pascal 等价名（如user-card、userCard、UserCard）
