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 声明中设置组件时忘记命名组件。 错误

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

正确

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