Vue 3 不渲染组件（在 Laravel 8 中）答案

【问题标题】：Vue 3 not rendering components (in Laravel 8)Vue 3 不渲染组件（在 Laravel 8 中）
【发布时间】：2023-02-03 21:44:29
【问题描述】：

我有一个简单的刀片，里面有一个组件：

<section>
    <h1>Carousel</h1>
    <carousel :slides="@json($data->slides)">
</carousel>

该组件如下所示：

<template>
    <fragment>
        <h1>My component</h1>
        {{ slides }}
    </fragment>
</template>

export default {
    props: [
      'slides'
    ],
    mounted() {
        console.log("mounted")
    }
}

当然，我在 app.js 中有它（路径是正确的）：

require('./bootstrap');

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

Vue.component('carousel', require('./components/web/partials/Carousel.vue').default);

const app = new Vue({`
    el: '#app',`
});

我的 webpack.mix.js 还包含：

mix.js('resources/js/app.js', 'public/js')     .vue()     .sass('resources/sass/app.scss', 'public/css');

但是当我访问该页面时，我看不到该组件。我只看到刀片中的 <h1>Carousel</h1>。控制台中也没有错误，我觉得这很奇怪。 vue 安装后创建的“ExampleComponent”也没有渲染（我从 app.js 中删除了它）。

我在用着：

"laravel/ui": "^3.3" 
"vue": "^3.2.26", 
"vue-template-compiler": "^2.6.11" 
"sass": "^1.32.11", 
"sass-loader": "^11.0.1", 
"vue-loader": "^16.2.0"

我一直在尝试在 vue 版本和 vue-loader 版本之间切换，我一直在浏览 SO 遇到类似的问题，但没有一个解决方案对我有用。

【问题讨论】：

浏览器的控制台窗口中有任何信息吗？
@HovercraftFullOfEels 不，控制台是空的

标签： laravel vue.js vuejs3

【解决方案1】：

首先，在你的应用程序.js, 这是 Vue2 初始化的方式而不是 Vue3

// vue2 way
new Vue({`
    el: '#app',`
});

// vue3 way
Vue.createApp(...).mount('#app')

通过 hello-word of Vue3 查看 Vue3 是如何初始化的。

其次，Vue3内置组件中没有fragment。

阅读 document 了解更多关于内置组件的细节。

Vue3中可以直接写一个不带<fragment>的多根组件

<template>
    <h1>My component</h1>
    {{ slides }}
</template>

【讨论】：

【解决方案2】：

您需要在 blade 文件中引用 app.js 并将 id app 添加到 html 标签中：

<section id="app">
    <h1>Carousel</h1>
    <carousel :slides="@json($data->slides)"></carousel>
<section>
<script src="{{ mix('css/app.js') }}"></script>

【讨论】：