Vue.js中的未定义组件

Question

我正在关注Vue.js上的Laracasts教程，我遇到了一些障碍，我有一个名为app-footer.vue的vueify组件，其中包含我的所有样式脚本和模板。

<style>
    .red {
        background-color: #000;
    }
</style>

<template>
    <p class="footer-text">Copyright {{ currentYear }} </p>
</template>

<script>
    export default {
        data () {
            return {
                currentYear: new Date().getFullYear()
            }
        }
    }
</script>

然后在我看来，我将组件定义为

<app-footer></app-footer>

最后在我的app.js文件中导入模板文件并将其添加到我的Vue实例的组件列表中，如下所示

window.Vue = require('Vue');

import AppFooter from './components/app-footer.vue';

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

我只是不断收到组件错误，问我是不是 正确定义了我做错了什么？

Answer 1

问题很简单，我忘记在我的Vue声明中设置它时命名该组件。 的 WRONG

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

从右

 new Vue({
    el: 'body',
    components: { 'app-footer': AppFooter }
});