如何传递createApp在Vue 3之间的应用程序?

Question

我正在从Vue 2迁移到Vue 3。在Vue 2中，可以像这样全局注册一个组件:main.js

new Vue({
el: '#app'
})

全局注册组件:my-component.js

Vue.component('my-component', {
template: '<div>Hi!</div>'
})

我使用Webpack在其他组件中导入单文件组件，然后我将它捆绑在一个文件中。对于Vue 2，这很容易，因为Vue实例是全局注册的。现在在Vue 3中，由于Vue.createApp({}).mount('#app')的存在，这就行不通了。我试图做这样的事情:main.js

const app = createApp({});
export const app;

my-component.js

import { app } from './main.js';
app.component('my-component', {
template: '<div>Hi!</div>'
})

结尾:close-app.js

import { app } from './main.js';
app.mount('#app');

和index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
<script type="application/javascript" src="my-component.js"></script>
<div id="app">
<my-component></my-component>
</div>
<script type="application/javascript" src="close-app.js"></script>

由于Webpack，我正在导入app。Webpack将它捆绑在自调用函数中，但这不起作用。我知道有一种方法可以像这样在全局声明它:window.app = app;，但这不是一个好主意。有人能帮我一下吗?

Answer 1

Components Webpacks

由于Vue 3组件注册必须在应用实例上调用，并且你要单独导入每个组件Webpack，我认为你不能避免全局变量。在您的组件中使用全局app实例(window.app)可能是最简单的解决方案，特别是如果您希望最小化更改。

或者，您可以将组件构建为UMD模块，其中组件定义作为全局导出，导入带有<script>标记的UMD模块(就像您已经在做的那样)，并为每个组件调用app.component():

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
<!-- sets MyComponent global -->
<script type="application/javascript" src="./my-component.umd.js"></script>
<div id="app">
<my-component></my-component>
</div>
<script>
const app = Vue.createApp({})
app.component(MyComponent.name, MyComponent)
app.mount('#app')
</script>

组件模块脚本

在main.js中，使用您在<script>标签中导入的全局Vue中的createApp:

export const app = Vue.createApp({})

然后使用<script type="module">:

将脚本导入为模块

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
<script type="module" src="./my-component.js"></script>
<div id="app">
<my-component></my-component>
</div>
<script type="module" src="./close-app.js"></script>

演示