核心是机制性隔离命名空间：全局注册统一用kebab-case（如'base-dialog'），局部注册保持PascalCase一致性，第三方库加前缀（如'PButton'），业务组件用语义前缀（如'crm-button'），构建期扫描防重叠，90%组件应局部注册。

避免全局组件污染命名空间，核心是控制注册范围、统一命名逻辑、隔离第三方与自定义组件。不是简单起名不重复，而是从机制上切断歧义路径。

统一注册风格，禁用自动推导

混用 kebab-case、PascalCase 和 camelCase 是冲突主因。Vue 运行时会把 dialog-box、dialogBox、DialogBox 视为等价键名，只要注册表中存在任意两个，就会警告并忽略其一。

• 全局注册一律用 kebab-case 字符串： app.component('base-dialog', BaseDialog)，模板中只写
• 局部注册保持 PascalCase 变量名 + 文件名 + name 选项三者一致，例如 BaseDialog.vue 中 defineOptions({ name: 'BaseDialog' })
• 禁用 unplugin-vue-components 等插件的默认命名推导（如把 BaseDialog.vue 自动注册为 baseDialog），改用显式配置或关闭自动注册

前缀强制隔离，区分来源层级

通用 UI 库和业务组件天然属于不同语义层，不能共用同一命名空间。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 为第三方库启用组件前缀： app.use(PrimeVue, { componentPrefix: 'P' }) → 、
• 业务基础组件统一加团队/项目前缀： app.component('app-button', AppButton)、app.component('ui-card', UiCard)
• 避免使用无意义前缀（如 my-、custom-），优先选有归属感的简写（如 crm-、pay-）

构建期扫描 + 运行时防御

靠人工检查容易漏，需工程化手段提前拦截。

• 在 vite 构建流程中插入脚本，扫描所有 app.component() 调用和 components: { } 对象，提取全部注册键名
• 对每个键名生成 kebab / camel / pascal 三种形式，检查是否存在跨形式重叠（如同时存在 statistic-card 和 StatisticCard）
• 使用 import.meta.glob 批量注册时，强制文件名用 kebab-case，并在注册逻辑中统一转为 kebab-case 键名，不保留原始大小写

优先局部注册，收敛全局暴露面

90% 的组件其实不需要全局可用。过度全局化是命名污染的根源之一。

• 仅将真正复用率高、无强上下文依赖的组件设为全局：基础按钮、弹窗壳、加载状态、骨架屏
• 页面级、模块级、业务逻辑强耦合的组件，一律局部注册，哪怕多写几行 import 和 components: { }
• 全局注册入口收口到一个专用文件（如 plugins/components.ts），禁止在 main.ts 或页面中零散调用 app.component

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