我用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
。
<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');
有什么想法吗,有什么问题或者我需要做什么才能让vue组件工作?
1条答案
按热度按时间whlutmcx1#
我注意到我的项目中缺少了'vue-loader'。安装vue-loader后,example-component开始在新的测试页面中工作,尽管它在welcome.blade.php中仍然无法工作。