未知的自定义元素：<firstcomponent> - 您是否正确注册了组件

如何解决未知的自定义元素：<firstcomponent> - 您是否正确注册了组件

我是 Vue.js 的初学者，我在创建我的第一个组件时遇到了问题，我给我的组件命名，我认为我正确注册了它，但我有 未知的自定义元素：-你注册了吗？组件正确吗？对于递归组件，请确保提供“名称”选项。 错误 。 我错过了什么

这是我的FirstComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Title</div>
                    <div class="card-body">
                        Send it from Vue Js
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
export default {
name: "firstcomponent",mounted() {
     console.log("Component mounted successfully");
    }
}
</script>

<style scoped>

</style>

我的app.js

require('./bootstrap');
import Vue from 'vue';
import FirstComponent from "./components/FirstComponent";

// window.Vue = require('vue');

Vue.component('firstcomponent',require('./components/FirstComponent.vue'));

new Vue({
    el: '#app',components: {
        'firstcomponent': FirstComponent
    }
})

还有我的刀

@extends('layouts.app')
@section('content')
    <template>
        <div class="flex-center position-ref full-height">
            <div class="content">
                <firstcomponent></firstcomponent>
            </div>
        </div>
    </template>
@endsection

解决方法

在 app.js 中，您应该定义应该从组件中导出哪些内容。使用默认值可以正常工作：

Vue.component('firstcomponent',require('./components/FirstComponent.vue').default);