使用Webpack导入Vue组件

我使用Webpack进行了hello world Vue应用程序设置，并使初始App组件正常工作并安装到了机身上。尽管在该App组件中，我无法弄清楚如何使用自己制作的更多组件。

main.js

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

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

应用程序

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

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

我试过了

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

然后在main.js和app.vue的脚本部分中尝试使用

<top-bar></top-bar>

没有运气。

我想我缺少如何正确注册组件的信息，例如在Vue文档中：

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

但是我认为将Webpack与vue-loader一起使用时，我需要做一些不同的事情。