Vue.component 不是函数/从 Vue 2 迁移到 Vue 3 版本

Question

我正在尝试将项目中的 Vue 版本从 2 更新到 3。问题是，我必须使用 .js 文件，而不是 .vue。问题是，我找不到“Vue.component”的替代品。

我的app.js

    // Vue Router 4
    var router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes,
      });

    // Create Vuex store
    var store = Vuex.createStore({
        state: {
            // state 
        }
    });

    // Vue 3
    var app = Vue.createApp({});

    app.use(router);
    app.use(store);
    app.mount('#app');

组件之一：

分量-ex.js

Vue.component('component-ex', {});

// I also tried app.component('component-ex', {});

然后我通过 index.html

导入应用程序和所有组件

Index.html

    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
    <script src="https://unpkg.com/vuex@4.0.0/dist/vuex.global.js"></script>

    <script src="app.js"></script>
    <script src="/components/component-ex.js"></script>

在版本 2 中一切正常，但现在它抛出错误：Vue.component 不是函数

Answer 1

来自Vue docs：

应始终在完成所有应用配置和资产注册后调用 .mount() 方法。另请注意，与资产注册方法不同，它的 return 值是根组件实例而不是应用程序实例。

所以你的 index.html 应该看起来更像这样：

    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
    <script src="https://unpkg.com/vuex@4.0.0/dist/vuex.global.js"></script>

    <script src="app.js"></script>
    <script src="/components/component-ex.js"></script>
    <script src="/components/another-component.js"></script>
    <script src="/components/yet-another-component.js"></script>
    
    <script>app.mount('#app');</script>

Vue.component 不是函数/从 Vue 2 迁移到 Vue 3 版本

Vue.component is not a function / Migrating from Vue 2 to Vue 3 Version

vue.js

vuejs2

vuejs3