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

コンポーネントエラーが発生し続け、正しく定義したかどうかを尋ねられます。正確には何が間違っていますか?