recherche

Maison  >  Questions et réponses  >  le corps du texte

Les composants Vue 3 ne peuvent pas être affichés dans le projet Laravel

J'ai essayé tout ce à quoi je pouvais penser, mais malgré l'absence d'erreur de construction, je n'arrive pas à charger les composants Vue dans mon projet très simple. Je ne comprends pas pourquoi, mais lorsque j'essaie d'afficher la page à l'aide de Laravelserve, je reçois simplement une page vierge.

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <title>Laravel</title>
    
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    
    </head> 
    <body class="antialiased">
        <div id='app'>
            <Home />
        </div>
    
        <script scr="{{ asset('js/app.js') }}"></script>
    </body>
</html>

app.js

require('./bootstrap');

import { createApp } from 'vue'

import Home from './components/Home.vue';

const app = createApp({});

app.component('home', Home);

app.mount('#app');

Home.vue

<template>
    <div>
        <h1> WELCOME </h1>
    </div>
</template>

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

P粉032900484P粉032900484366 Il y a quelques jours501

répondre à tous(2)je répondrai

  • P粉262073176

    P粉2620731762024-02-27 10:02:27

    Avez-vous essayé de changer les languettes de la lame de <Home /> 更改为 <home />  ? Comme l'a écrit un autre utilisateur, vous devez ajouter .default dans la ligne où vous importez le composant

    répondre
    0
  • P粉946336138

    P粉9463361382024-02-27 00:27:42

    Je ne peux pas commenter à cause de mon score, désolé je dois faire comme un auvent.

    Êtes-vous sûr que la ligne app.component('home', Home); est la bonne façon d'importer une composition ? Parce que d'après ce que j'ai trouvé, ce serait 

    Vue.component('home', require('./components/Home.vue').default);

    C'est tout.

    répondre
    0
  • Annulerrépondre