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 } 
}); 

RIGHT

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