1. 新建一个index.ts,用于管理所有全局组件
// 引入项目中全部的全局组件 import SvgIcon from "./SvgIcon/index.vue"; import Pagination from "./Pagination/index.vue"; // 全局对象 const allGlobalComponent = <any>{ SvgIcon, Pagination }; // 对外暴露插件对象 export default { // vue提供install方法供我们开发新的插件及全局注册组件等 install(app: any) { // 注册项目全部的全局组件 Object.keys(allGlobalComponent).forEach((key) => { // 注册为全局组件 app.component(key, allGlobalComponent[key]); // console.log(key); }); } };
2. main.ts 使用插件
// 引入自定义插件对象:注册整个给项目全局组件 import globalComponent from "@/components"; // 会自动识别index.vue文件 // 安装自定义插件 app.use(globalComponent);
3. 使用组件
<svg-icon width="40px" height="40px" name="shoppingCar"></svg-icon> <Pagination> </Pagination>
4. 效果
标签:index,插件,key,注册,vue3,组件,全局 From: https://www.cnblogs.com/gamepen/p/17457635.html