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

Question

在 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 中实现相同的结果？

Answer 1

Vue 3 中没有全局注册。所有内容都在特定应用程序范围内。

所以你能得到的最接近的是：

const app = createApp({});

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

app.mount("#app");

您必须决定在两个文件之间传递相关位的最佳方式。例如，您可以将 index.js 设为插件。

RFC：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md

Answer 2

我遇到了同样的问题。为了仍然将我的组件放在外部文件中，我将我的 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);
}

然后我的main.ts在安装之前使用函数：

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

registerComponents(app);

app.mount("#app");

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

Answer 3

在 Vue 3 中我们可以有 multiple application instances

const app1 = createApp({})
app1.mount('#container-1')

const app2 = createApp({})
app2.mount('#container-2')

可以在同一页面上 co-exist。所以我们不能再使用 Vue 从 import Vue from 'vue' 到 register/use 的插件。

---

我的解决方案

See the implementation live on Stackblitz

第 1 步：创建文件夹以保存 plugins/packages/dependencies

我将其命名为 plugins，因为它们将插入 main.js。

第 2 步：创建 main-app.js

您也可以将其命名为 app1.js 或任何您想要的名称。内容如下：

import { createApp } from 'vue'
import App from '../App.vue'

export const app = createApp(App)

第 3 步：插入 main.js

import { app } from './plugins/main-app'

app.mount('#app')

第 4 步：创建新插件

现在让我们创建一个src/plugins/global-components.js

import { app } from './main-app'
import MyComponent from '@/components/MyComponent'

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

在main.js中注册：

import { app } from './plugins/main-app'
import './plugins/global-components'

app.mount('#app')

你可以更进一步，在 src/plugins 中有一个 index.js，就像 main.js，然后在 main.js 中，你只需有 import './plugins' 但我个人不喜欢这个额外的步骤