javascript - Laravel-Vue : Unknown component footer-div

Question

我是根据this article开始学习Vue.js的。SPA 工作正常，但是当我想添加新组件时出现此错误:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我的vueapp.js:

import Footer from './components/includes/Footer.vue'

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './components/App'
import Welcome from './components/Welcome'
import Page from './components/Page'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/home',
            name: 'welcome',
            component: Welcome,
            props: { title: "This is the SPA home" }
        },
        {
            path: '/spa-page',
            name: 'page',
            component: Page,
            props: { 
                title: "This is the SPA Second Page",
                author : {
                    name : "Fisayo Afolayan",
                    role : "Software Engineer",
                    code : "Always keep it clean"
                }
            }
        },    
    ],
})
const app = new Vue({
    el: '#app',
    components: { 
        App,
        'footer-div': Footer
    },
    router,
});

如何解决这个问题？

编辑:

我的文件夹结构:

编辑2:

我的App.vue:

<template>
    <div>
        <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
            <div class="container">
                <ul class="navbar-nav">
                    <router-link :to="{ name: 'welcome' }" class="nav-link">Home</router-link>
                    <router-link :to="{ name: 'page' }" class="nav-link" >Spa-Page</router-link>
                </ul>
            </div>
        </nav>
        <main>
            <router-view></router-view>
        </main>
        <footer-div></footer-div>
    </div>
</template>
<script>
    export default {}
</script>

Answer 1

您没有在任何地方导入页脚组件。您可以在主文件或应用程序组件中导入。要将其导入到您的应用程序组件中，请修改您的代码，使其如下所示:

<template>
    <div>
        <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
            <div class="container">
                <ul class="navbar-nav">
                    <router-link :to="{ name: 'welcome' }" class="nav-link">Home</router-link>
                    <router-link :to="{ name: 'page' }" class="nav-link" >Spa-Page</router-link>
                </ul>
            </div>
        </nav>
        <main>
            <router-view></router-view>
        </main>
        <Footer></Footer>
    </div>
</template>
<script>
    import Footer from './includes/Footer';
    export default {
        components: {
            Footer
        }
    }
</script>

或者，如果您不想修改 App 组件并希望保持原样，请在导入 App 组件之前在 vueapp.js 中导入 Footer 组件，如下所示:

Vue.component('footer-div', require('./components/includes/Footer').default);