夜雨聆风扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长
发现1000+提升效率与开发的AI工具和实用程序：https://tools.cmdragon.cn/zh/apps?category=ai_chat
一、为啥要用插件注册全局组件？
你有没有写过这样的代码——每个组件都要导入同一个按钮组件：
<!-- 每个组件都要写这几行 -->
<script setup>
import MyButton from "@/components/MyButton.vue";
import MyInput from "@/components/MyInput.vue";
import MyModal from "@/components/MyModal.vue";
</script>一个项目几十个组件，每个都写一遍import，烦不烦？
用插件注册全局组件后，任何地方直接用，不用import：
<template>
<MyButton>点我</MyButton>
<MyInput v-model="name" />
<MyModal v-model:show="visible" />
</template>这就是插件注册全局组件的好处——一劳永逸。
二、用app.component()注册全局组件
注册单个组件
// plugins/ui.js
importMyButtonfrom"@/components/MyButton.vue";
exportdefault {
install(app) {
app.component("MyButton", MyButton);
},
};批量注册组件
实际项目中你不可能一个一个注册，太累了。咱们来个批量注册：
// plugins/ui.js
importMyButtonfrom"@/components/MyButton.vue";
importMyInputfrom"@/components/MyInput.vue";
importMyModalfrom"@/components/MyModal.vue";
importMyCardfrom"@/components/MyCard.vue";
importMyAlertfrom"@/components/MyAlert.vue";
const components = {
MyButton,
MyInput,
MyModal,
MyCard,
MyAlert,
};
exportdefault {
install(app) {
Object.entries(components).forEach(([name, component]) => {
app.component(name, component);
});
},
};更优雅：自动导入注册
用import.meta.glob（Vite环境）自动扫描组件目录：
// plugins/ui.js
exportdefault {
install(app) {
const components = import.meta.glob("@/components/base/*.vue", {
eager: true,
});
Object.entries(components).forEach(([path, module]) => {
const fileName = path.split("/").pop().replace(".vue", "");
const componentName = `Base${fileName}`;
app.component(componentName, module.default);
});
},
};这样只要你在@/components/base/目录下新建一个.vue文件，它就会自动被注册为全局组件，连插件代码都不用改。
假设目录下有：
• Button.vue→ 注册为<BaseButton>• Input.vue→ 注册为<BaseInput>• Modal.vue→ 注册为<BaseModal>
三、用app.directive()注册全局指令
注册单个指令
// plugins/directives.js
exportdefault {
install(app) {
app.directive("focus", {
mounted(el) {
el.focus();
},
});
},
};用起来：
<template>
<input v-focus />
<!-- 页面加载后自动聚焦 -->
</template>常用指令封装
v-permission：权限控制
app.directive("permission", {
mounted(el, binding) {
const requiredPermission = binding.value;
const userPermissions = []; // 从store或inject获取
if (!userPermissions.includes(requiredPermission)) {
el.parentNode?.removeChild(el);
}
},
});用起来：
<template>
<button v-permission="'admin'">删除用户</button>
<!-- 只有admin权限的用户才能看到这个按钮 -->
</template>v-debounce：防抖点击
app.directive("debounce", {
mounted(el, binding) {
const delay = binding.arg ? parseInt(binding.arg) : 300;
const handler = binding.value;
let timer = null;
el.addEventListener("click", () => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
handler();
}, delay);
});
},
});用起来：
<template>
<button v-debounce="handleSubmit">提交</button>
<button v-debounce:500="handleSave">保存（500ms防抖）</button>
</template>v-loading：加载状态
app.directive("loading", {
mounted(el, binding) {
const mask = document.createElement("div");
mask.className = "v-loading-mask";
mask.innerHTML = '<div class="spinner"></div>';
mask.style.display = binding.value ? "flex" : "none";
el.style.position = "relative";
el.appendChild(mask);
},
updated(el, binding) {
const mask = el.querySelector(".v-loading-mask");
if (mask) {
mask.style.display = binding.value ? "flex" : "none";
}
},
});用起来：
<template>
<div v-loading="isLoading">
<!-- 内容 -->
</div>
</template>批量注册指令
跟组件一样，指令也可以批量注册：
// plugins/directives.js
const focus = {
mounted(el) {
el.focus();
},
};
const permission = {
mounted(el, binding) {
// ...
},
};
const debounce = {
mounted(el, binding) {
// ...
},
};
const directives = { focus, permission, debounce };
exportdefault {
install(app) {
Object.entries(directives).forEach(([name, directive]) => {
app.directive(name, directive);
});
},
};四、把组件和指令放一个插件里
如果你的UI组件库既有组件又有指令，可以都放一个插件里：
// plugins/uiLibrary.js
importMyButtonfrom"@/components/MyButton.vue";
importMyInputfrom"@/components/MyInput.vue";
importMyModalfrom"@/components/MyModal.vue";
const components = { MyButton, MyInput, MyModal };
const directives = {
focus: {
mounted(el) {
el.focus();
},
},
permission: {
mounted(el, binding) {
/* ... */
},
},
};
exportdefault {
install(app, options = {}) {
// 注册组件
Object.entries(components).forEach(([name, component]) => {
app.component(name, component);
});
// 注册指令
Object.entries(directives).forEach(([name, directive]) => {
app.directive(name, directive);
});
// 还可以provide全局配置
app.provide("uiConfig", options);
},
};安装时传配置：
// main.js
import uiLibrary from"./plugins/uiLibrary.js";
app.use(uiLibrary, {
theme: "dark",
locale: "zh",
prefix: "My",
});五、全局注册的注意事项
命名冲突
全局组件和指令的名字是全局唯一的。如果你的插件注册了一个MyButton，另一个插件也注册了MyButton，后者会覆盖前者。
建议给组件名加个前缀：
app.component("MyButton", MyButton); // 加前缀My
app.component("BaseInput", MyInput); // 加前缀Base
app.component("AppModal", MyModal); // 加前缀AppTree-shaking问题
全局注册的组件和指令无法被Tree-shaking优化。也就是说，即使某个组件你只在个别页面用了，它也会被打包进最终产物。
如果你的项目对包体积很敏感，建议：
• 高频使用的组件用全局注册（如按钮、输入框） • 低频使用的组件用局部导入
调试困难
全局注册的组件在DevTools里看不到导入来源，调试的时候可能搞不清这个组件是从哪来的。所以全局注册要适度，别啥都往全局塞。
课后 Quiz
问题 1
用插件注册全局组件和局部import组件，各有什么优缺点？
答案解析
全局注册优点：不用每个组件都import，直接用；适合高频使用的通用组件。
全局注册缺点：无法Tree-shaking，增加包体积；命名容易冲突；调试时看不出组件来源。
局部import优点：按需加载，包体积小；来源清晰，方便调试。
局部import缺点：每个组件都要写import，重复劳动。
建议：高频通用组件全局注册，低频特殊组件局部导入。
问题 2
import.meta.glob是什么？为什么用它来批量注册组件？
答案解析
import.meta.glob是Vite提供的特殊API，用来批量导入匹配某个模式的文件。它返回一个对象，key是文件路径，value是动态导入函数。用它来批量注册组件的好处是——新建组件文件后不用手动修改插件代码，组件会自动被发现和注册。
问题 3
为什么全局注册的组件无法被Tree-shaking？
答案解析
因为Tree-shaking依赖静态分析——打包工具需要确定哪些代码没被使用才能移除。全局注册的组件通过app.component()动态注册，打包工具无法确定哪些组件在模板中被使用了，所以只能全部保留在最终产物中。而局部import是静态的，打包工具可以分析出哪些组件没被使用并移除。
常见报错解决方案
报错 1：Failed to resolve component: MyButton
错误场景：
<template>
<MyButton>点我</MyButton>
<!-- 💥 找不到组件 -->
</template>报错原因：
组件没有被注册。可能是插件没安装，或者组件名写错了。
解决方案：
1. 确认 app.use()已调用2. 检查组件名是否一致（大小写敏感） 3. 检查组件是否正确导出
// 确认注册
app.component("MyButton", MyButton); // 名字要一致
// 确认安装
app.use(uiPlugin); // 别忘了这行报错 2：Failed to resolve directive: focus
错误场景：
<template>
<input v-focus />
<!-- 💥 找不到指令 -->
</template>报错原因：
指令没有被注册，或者指令名写错了。注意指令名不需要加v-前缀。
解决方案：
注册时用不带v-的名字：
app.directive('focus', { ... }) // ✅ 注册时用 'focus'
// 使用时用 v-focus报错 3：import.meta.glob is not a function
错误场景：
const components = import.meta.glob("./*.vue"); // 💥 报错报错原因：import.meta.glob是Vite特有的API，在Webpack或其他构建工具中不可用。
解决方案：
如果用Webpack，用require.context替代：
const requireComponent = require.context("./", false, /\.vue$/);
requireComponent.keys().forEach((fileName) => {
const component = requireComponent(fileName).default;
const name = fileName.replace(/^\.\//, "").replace(/\.vue$/, "");
app.component(name, component);
});或者手动导入，不依赖自动扫描。
