核心目标是让常用UI组件在任意模板中直接使用，无需重复导入；需通过规范目录结构、统一导出、插件机制批量注册，并确保注册时机在app.mount()之前。
Vue 中全局注册公共组件，核心目标是让常用 UI 元素（如按钮、弹窗、输入框）在任意 `.vue` 文件的 `` 里直接使用，无需重复 `import` 和局部声明。关键不在于“能不能注册”，而在于“怎么注册得干净、可维护、不拖慢首屏”。
创建规范的公共组件文件
把复用率高的组件统一放在 src/components/common/ 目录下，每个组件保持独立、职责单一：
- 文件名用大驼峰（如
MyButton.vue、MyDialog.vue），模板中标签名自动对应为<MyButton> - 组件内部尽量不依赖业务逻辑，props 控制行为，slots 控制内容，避免硬编码状态
- 样式加
scoped，防止污染全局；若需覆盖第三方样式（如 Element Plus），可用:deep()
统一导出所有公共组件
在 src/components/common/index.js 中集中导出，不注册、只暴露：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 每行一个
export { default as Xxx } from './Xxx.vue'，命名与文件名一致 - 导出名必须和你希望在模板中使用的标签名完全一致（如
MyButton→<MyButton>） - 这个文件只做“打包出口”，不执行任何注册逻辑，便于后续 Tree-Shaking 或按需导入
通过插件机制批量注册
新建 src/components/common/installer.js，用标准 Vue 插件格式封装注册逻辑：
立即学习“前端免费学习笔记（深入）”；
- 用
import * as CommonComponents from '.'一次性导入index.js导出的所有组件 - 定义一个数组列出要全局注册的组件名（字符串），比如
['MyButton', 'MyDialog'] -
install(app)方法里遍历该数组，对每个名字调用app.component(name, CommonComponents[name]) - 这样写既清晰又符合 Vue 插件生态，main.js 只需
app.use(CommonInstaller)一行
在 main.js 中启用注册
确保注册动作发生在 createApp(App) 之后、app.mount() 之前：
- 先
import CommonInstaller from './components/common/installer' - 再
app.use(CommonInstaller)—— 这一步才真正把组件挂到app._context.components上 - 顺序不能错：组件必须在应用实例挂载前注册，否则模板编译时 resolveComponent 找不到
- 如果用了 Vite，注意
import.meta.glob动态导入方式适合快速原型，但不利于类型推导和 IDE 跳转，生产环境建议显式列表
