Importación de componentes Vue con Webpack

Tengo una configuración de la aplicación hello world Vue 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 averiguar 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>

He intentado

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

En ambos casos.js y la sección de script de app.vue luego intentó usar

<top-bar></top-bar>

, Sin suerte.

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

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

Pero creo que cuando uso webpack con vue-loader necesito hacer algo diferente.

Author: rhand, 2016-02-15
Source

2 answers

Puede registrarlo globalmente como mostró, o si desea registrarlo localmente para usarlo en un solo componente, debe agregarlo al objeto components de la instancia 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>
 38
Author: Jeff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-15 19:46:12

Puede darle un nombre adecuado en el objeto components 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>
 5
Author: Kevin Muchwat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-25 06:23:25