Vue 3 中组件注册分全局和局部两种：全局注册在 main.js 通过 app.component() 实现，全项目可用但影响打包体积；局部注册在组件内导入即用（）或 components 选项声明，作用域受限但依赖清晰、支持 tree-shaking。

Vue 3 中区分全局注册和局部注册，核心看两点：注册位置和作用范围。全局注册一次，全项目可用；局部注册只在当前组件内生效，更可控也更利于工程维护。

全局注册：在应用实例上统一注册

全局注册发生在应用启动阶段，通常在 main.js 或 main.ts 中，通过 app.component() 方法完成：

• 注册后，该组件可在任意 .vue 文件的模板中直接使用，无需再次导入
• 支持链式调用，例如：app.component('CompA', CompA).component('CompB', CompB)
• 常用于高频复用的基础组件（如 MyButton、MyDialog）
• ⚠️ 注意：即使某组件未被实际使用，也会被打包进最终 JS，影响体积

局部注册：在单个组件内部显式声明

局部注册发生在具体组件的定义中，只对当前组件及其模板生效：

Springboot Vue Builder

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

下载

• 使用 <script setup></script> 时：导入即可用，无需额外注册（推荐方式）
• 使用 Options API 时：需在 components 选项中显式声明，例如：components: { MyComponent }
• 子组件无法继承父组件的局部注册项，后代组件若需使用，必须各自导入并注册
• ✅ 优势明显：依赖清晰、支持 tree-shaking、便于按需加载和调试

命名与使用的一致性规则

无论全局还是局部注册，组件名建议统一采用 PascalCase（大驼峰） 格式（如 MyHeader），原因包括：

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

• 符合 JavaScript 标识符规范，方便导入和注册
• 模板中写成 <myheader></myheader> 可直观识别为 Vue 组件，而非原生 HTML 元素
• DOM 模板中也可用 <my-header></my-header>，Vue 会自动匹配 PascalCase 注册名

怎么选？优先局部，慎用全局

日常开发中应以局部注册为主，特别是业务组件；仅将真正通用、稳定、高频使用的 UI 基础组件考虑全局注册。这样既保持项目可维护性，又避免打包冗余。