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.