Глобальная регистрация компонентов Vuejs3 + Webpack 5 не работает

Я использую Vue3 и webpack для своего проекта. Я могу создавать компоненты с помощью Vue.component в Vue 2. Но в Vue3 это не работает. Вот мой код.

main.ts

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

const app = createApp(App);
app.config.globalProperties.$axios = axios;  

app.component('button-counter', {
    data: () => ({
        count: 0
    }),
    template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

const vm = app.mount('#app')

Компонент - 'button-counter' отлично работает выше. Но это не работает, когда я копирую в файл App.vue. Оба компонента «кнопка-счетчик1» и «кнопка-счетчик2» не могут быть зарегистрированы, и возникает ошибка «Vue не определен».

<template>
    <h2>Test</h2>
    <p>{{meg}}</p>

    <h2>Button counter</h2>
    <button-counter></button-counter>
</template>

<script lang="ts">
    import { defineComponent } from 'vue'

    export default defineComponent({
        name: 'App',
        setup() {
            return {
                msg: 'message from setup',
            }
        },
    })


    const app1 = Vue.component('button-counter1', {
        data: () => ({
            count: 0
        }),
        template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })

    const app2 = app.component('button-counter2', {
        data: () => ({
            count: 0
        }),
        template: '<button @click="count++">Clicked {{ count }} times.</button>'
    })
</script>

Заранее спасибо.


vuejs3 webpack-5
person Wilson Wu    schedule 16.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В версии 3 нет функции Vue, а функция app недоступна в компоненте App, вы можете экспортировать экземпляр app из основного файла, импортировать его в компонент App и использовать его для регистрации глобальных компонентов, но это не рекомендуется для глобального компоненты должны быть зарегистрированы внутри основного файла, но, поскольку вы используете сборщик, такой как webpack, вы можете создавать свои компоненты в отдельных файлах и регистрировать их локально или глобально с помощью пользовательского плагина:

registerPlugin.ts

import  ButtonCounter from './components/ButtonCounter.vue'

export default {
  install: (app, options) => {
    app.component('button-counter',ButtonCounter )
  }
}

main.ts


import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'
import registerPlugin from './plugins/registerPlugin '
const app = createApp(App);
app.use(registerPlugin)

....
person Boussadjra Brahim    schedule 16.03.2021
comment
Компонент является динамическим и должен быть создан и зарегистрирован программой. - person Wilson Wu; 17.03.2021