webpack - vuejs - vue loader

Importación de componentes Vue con Webpack

Question

Tengo una aplicación de Vue Hello World con Webpack y tengo el componente inicial de la aplicación funcionando y montado en el cuerpo. Aunque dentro de ese componente de la aplicación no puedo entender cómo usar más componentes que hice.

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>

Yo he tratado

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

En main.js y en la sección de scripts de app.vue, intenté usar

<top-bar></top-bar>

sin suerte

Creo que me falta cómo registrar el componente correctamente, como en los documentos de Vue:

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

Pero creo que al usar el paquete web con vue-loader necesito hacer algo diferente.

Answer 1

Puede darle un nombre adecuado en el objeto de componentes como se muestra a continuación

<template>
<nav-bar></nav-bar>
</template>
<script>
import TopBar from ''./TopBar.vue''
export default {
components: {
''nav-bar'': TopBar
}
}
</script>

Answer 2

Puede registrarlo de manera global como lo mostró, o si desea registrarlo localmente para usarlo en un solo componente, debe agregarlo al components objeto de la instancia de Vue:

<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>