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

bwitn5fc  于 2023-04-07  发布在  Vue.js
关注(0)|答案(1)|浏览(162)

我用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组件工作?

whlutmcx

whlutmcx1#

我注意到我的项目中缺少了'vue-loader'。安装vue-loader后,example-component开始在新的测试页面中工作,尽管它在welcome.blade.php中仍然无法工作。

相关问题