Importieren von Vue-Komponenten mit Webpack

Question

Ich habe eine Hallo Welt Welt Vue App-Setup mit Webpack und haben die erste App-Komponente arbeiten und an Körper montiert. Obwohl ich innerhalb dieser App-Komponente nicht herausfinden kann, wie ich mehr Komponenten verwende, die ich gemacht 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> 

I

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

In beiden main.js und das Skript Abschnitt app.vue dann versucht haben versucht, mit

<top-bar></top-bar> 

ohne Glück.

Ich glaube, ich bin fehlt, wie die Komponente ordnungsgemäß zu registrieren, wie in den Vue docs es tut:

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

Aber ich denke, wenn ich mit vue-Loader webpack müssen, etwas anderes zu tun.

Answer 1

Sie können es global registrieren, wie Sie zeigte, oder wenn Sie es vor Ort für die Verwendung in einer einzigen Komponente registrieren wollen, müssen Sie es an die components Aufgabe der Vue-Instanz hinzuzufügen:

<template> 
    <top-bar></top-bar> 
    <div class="message">{{ message }}</div> 
</template> 

<script> 
    import TopBar from './top-bar.vue' 
    export default { 
     data() { 
      return { 
       message: 'Hello World' 
      } 
     }, 
     components: { 
      TopBar 
     } 
    } 
</script> 

Answer 2

können Sie Geben Sie einen geeigneten Namen in das Komponentenobjekt ein, wie unten gezeigt.