Importieren von Vue-Komponenten mit Webpack

Ich habe eine Hello World Vue-App mit Webpack eingerichtet und die anfängliche App-Komponente funktioniert und am Körper montiert. Obwohl ich in dieser App-Komponente nicht herausfinden kann, wie ich mehr Komponenten verwenden kann, die ich erstellt habe.

main.js

import Vue from 'vue'
import App from './app.vue'

new Vue({ 
    el: 'body',
    components: { App }
})

app.vue

<template>
    <div class="message">{{ message }}</div>
</template>

<script>
    export default {
        data () {
            return {
                message: 'Hello World'
            }
        }
    }
</script>

Ich habe versuch

import TopBar from './top-bar.vue'

In main.js und im Skriptabschnitt von app.vue wurde dann versucht, @ zu verwende

<top-bar></top-bar>

ohne Glück.

Ich denke, mir fehlt, wie die Komponente richtig registriert wird, wie in den Vue-Dokumenten:

Vue.component('top-bar', TopBar);

Aber ich denke, wenn ich Webpack mit Vue-Loader verwende, muss ich etwas anderes tun.

Antworten auf die Frage(4)

Ihre Antwort auf die Frage