VUE3自定义组件全局挂载

LinMin_Rik

已于 2023-11-02 09:56:36 修改

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE3.x 文章标签： vue.js

于 2023-07-14 14:07:16 首次发布

本文链接：https://blog.csdn.net/weixin_50644805/article/details/131721792

VUE3.x 专栏收录该内容

8 篇文章

订阅专栏

文章讲述了如何在Vue应用中引入自定义组件和AntDesignVue组件库，通过在main.ts中直接挂载或在registerGlobComp.ts中初始化全局组件的方法。同时，介绍了应用的启动流程，包括设置路由、数据仓库配置以及使用路由拦截器等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、直接在main.ts中

import type { App } from "vue";
import { IconButton } from "./Button";//引用自定义组件
import Antd from "ant-design-vue";//引用Ant组件库

app.use(IconButton);//全局挂载自定义组件
app.use(Antd);//全局挂载Ant组件库

2、高级写法

（1）在组件文件夹components中创建一个registerGlobComp.ts文件

下面是registerGlobComp.ts的代码：

import type { App } from "vue";
import { IconButton } from "./Button";//引用自定义组件
import Antd from "ant-design-vue";//引用Ant组件库

/** 初始化全局组件 */
export function registerGlobComp(app: App) {
  app.use(IconButton);//全局挂载自定义组件
  app.use(Antd);//全局挂载Ant组件库
}

（2）再到main.ts文件中

import "virtual:windi-base.css";
import "virtual:windi-components.css";
import "/@/design/index.less";
import "virtual:windi-utilities.css";
import "ant-design-vue/dist/antd.less";
import App from "./App.vue";
import { createApp } from "vue";
import { setupStore } from "/@/store";
import { initAppConfigStore } from "/@/logics/initAppConfig";
import { registerGlobComp } from "/@/components/registerGlobComp"; //引用registerGlobComp.ts文件中的registerGlobComp方法
import { router, setupRouter } from "/@/router";
import { setupRouterGuard } from "/@/router/guard";
import { setupGlobDirectives } from "/@/directives";
import { initSiteConfigStore } from "/@/logics/initSiteConfigStore";

async function bootstrap() {
  const app = createApp(App);

  // 初始化数据仓库
  setupStore(app);

  // 初始化项目配置
  initAppConfigStore();

  // 初始化全局组件
  registerGlobComp(app);//将app环境变量传入registerGlobComp方法中进行挂载操作

  // 初始化路由
  setupRouter(app);

  // 初始化路由拦截器
  setupRouterGuard(router);

  // 初始化全局指令
  setupGlobDirectives(app);

  // 初始化站点信息配置
  initSiteConfigStore();

  app.mount("#app");
}

bootstrap();