ExampleComponent在Vue的新Laravel 10项目中不显示

Question

我已经用Vue用以下命令创建了一个新的Laravel 10项目:

composer create-project laravel/laravel vue3
cd vue3 
composer require laravel/ui
php artisan ui vue --auth
npm install
npm run dev

启动本地服务器后，我看到Laravel项目按照resources/views/welcome.blade.php。为了测试Vue是否正常工作，我在welcome.blade.php

中添加了以下代码

<div>
<example-component></example-component>
</div>

然而，我没有看到任何输出由于<example-component></example-component>在页面上，我也没有看到任何错误/消息在开发控制台。(如果我在welcome.blade.php中做任何其他更改，那就反映在页面上。我不知道为什么这个组件不工作。

下面是package.json的内容

{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@popperjs/core": "^2.11.6",
"@vitejs/plugin-vue": "^4.0.0",
"axios": "^1.1.2",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^0.7.2",
"sass": "^1.56.1",
"vite": "^4.0.0",
"vue": "^3.2.37"
}
}

和，我的resources/js/app.js

import './bootstrap';
import { createApp } from 'vue';
const app = createApp({});
import ExampleComponent from './components/ExampleComponent.vue';
app.component('example-component', ExampleComponent);
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, 
definition]) => {
//     app.component(path.split('/').pop().replace(/.w+$/, ''), 
definition.default);
// });
/**
* Finally, we will attach the application instance to a HTML element with
* an "id" attribute of "app". This element is included with the "auth"
* scaffolding. Otherwise, you will need to add an element yourself.
*/
app.mount('#app');

任何想法，什么是错的，我需要做什么，使价值组件的工作?

Answer 1

我注意到在我的项目中缺少'vue-loader'。在安装了vue-loader之后，示例组件开始在一个新的测试页面中工作，尽管它仍然不能在welcome.blade.php

中工作。