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文件I导入模板文件，并将其添加到我的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 } 
}); 

RIGHT

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