如何修復錯誤 [Vue 警告]：未知的自定義元素？

Question

1. 幫助修復錯誤：

[Vue 警告]：未知的自定義元素： <app-page-test> - 您是否正確注冊了組件？ 對於遞歸組件，請確保提供“名稱”選項。

（在<Root>找到）

2. 為什么我在vue工具中看不到這個組件app-page-test ？

信息。

我在 laravel 項目的自定義頁面中添加了組件。

測試刀片.php

@extends('layouts.app')

@push('scripts')
    <script src="{{ asset('js/base/page/test/app.js') }}" defer></script>
@endpush

@section('content')
    <div id="pageTest">
        <app-page-test></app-page-test>
    </div>
@endsection

資源/js/base/page/test/app.js

import Vue from 'vue';
import App from './components/main';
import store from './store/index';

Vue.component(
    'app-page-test',
    App
);

new Vue({
    el: '#pageTest',
    store
});

資源/js/base/page/test/components/main.vue

<template>
    <div class="app-page-test">
        <p>test</p>
    </div>
</template>
<script>
export default {
    name: "app-page-test",
    mounted() {
        console.log('Component mounted.')
    }
}
</script>

Answer 1

試試這個方法

import Vue from 'vue';
import App from './components/main';
import store from './store/index';
Vue.component('app-page-test', require('./components/AppPageTest.vue').default);

new Vue({
    el: '#pageTest',
    store, 
});