在Vue 3中组织注册Vue全局组件

问题描述

在Vue 2中，您可以在index.js中使用以下代码在多个文件中全局注册组件，而不会使main.js文件膨胀

import Vue from 'vue'
import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

并在main.js文件中使用

import '@/components'

但这种方法在Vue 3中似乎不适用

main.js

import { createApp } from 'vue';
import '@/components'

const app = createApp({});

app.mount("#app");

index.js

import Vue from 'vue' // doesn't work with import { createApp } from 'vue' too
import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

如何在Vue 3中实现相同的结果？

推荐答案

我也遇到了同样的问题。为了仍然将我的组件放在外部文件中，我将registerComponents.ts作为组件加载器函数，该函数作为参数接收它应该向其中添加组件的VUE应用程序。

因此，在我的案例中，我有一个文件registerComponents.ts，如下所示

import { App } from "vue";

// import components
import button from '@/components/Button.vue';

// register components
export const registerComponents = (app: App): void => {
    app.component('tw-button', button);
}

和Mymain.ts然后在挂载前使用函数：

const app = createApp(App)
    .use(store)
    .use(router)
    .use(i18n);

registerComponents(app);

app.mount("#app");

也许这对某人有帮助：-)