基础UI组件库注册核心是分层可控：全局仅注册跨页面高频、形态稳定、无业务耦合的原子组件（如Icon、Button），集中于main.js或plugins/register-ui.js显式注册；业务组件按需导入使用，保障tree-shaking；禁用自动扫描，坚持PascalCase命名与统一导出规范。
基础 UI 组件库的注册逻辑，核心是“按需可控、命名统一、避免污染”，不是把所有组件一股脑挂到全局，而是分层设计注册入口，兼顾开发体验与构建性能。
全局注册：只收编真正通用的基础原子组件
适合全局注册的组件必须满足三个硬条件：跨页面高频使用、形态稳定、无业务耦合。比如 Icon、Button、Input、Empty、Spinner 这类纯表现层组件。
在 main.js 或独立的 plugins/register-ui.js 中集中注册：
- 显式导入 + 显式注册，不依赖自动扫描，便于排查和维护
- 组件名统一用 PascalCase（如
MyButton），模板中写作<mybutton></mybutton>，语义清晰且兼容 IDE 补全 - 避免使用 kebab-case 注册名（如
'my-button'），否则在 DOM 模板中可能失效
按需注册：业务组件里只引入真正用到的 UI 组件
即使用了全局注册，也不代表所有页面都要加载全部 UI 组件。更推荐的做法是：在具体业务组件中，用 <script setup></script> 直接导入并使用，Vue 会自动识别并仅打包该组件。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
例如在订单页中只需用到 Card 和 Tag：
<script setup> import Card from '@/components/ui/Card.vue'; import Tag from '@/components/ui/Tag.vue'; </script>- 模板中直接写
<card><tag type="success">已发货</tag></card> - 这样 Webpack/Vite 能精准 tree-shaking，未使用的
DatePicker或Table不会进包
自动注册机制：仅用于内部基建，慎用于生产项目
有些团队会封装一个自动扫描 components/ui/ 下所有 .vue 文件并批量注册的逻辑。这看似省事，但存在明显隐患：
- 无法控制注册顺序，容易引发命名冲突（比如两个
Modal.vue） - IDE 无法推导类型，TypeScript 支持变弱
- 构建时无法静态分析哪些组件被真实引用，tree-shaking 失效
- 建议仅在低代码平台或内部脚手架中使用，业务项目应避免
命名与导出规范：为后续扩展留余地
每个 UI 组件文件应默认导出组件对象，并额外提供命名导出（named export），方便按需引入时重命名或组合：
- 组件文件
Button.vue写法：export default { name: 'MyButton', ... }，同时可加export const MyButton = defineComponent({...}) - 这样既支持
import MyButton from './Button.vue'，也支持import { MyButton } from '@/components/ui'的统一入口导出方式 - 所有组件名保持 PascalCase，避免大小写混用或下划线，防止 Windows/macOS 路径差异导致热更新异常
