vue3全局注册的另一种方式——插件注册

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. 效果