cari

Rumah  >  Soal Jawab  >  teks badan

Komponen Vue 3 tidak boleh dipaparkan dalam projek Laravel

Saya telah mencuba semua yang saya boleh fikirkan, tetapi walaupun tidak mendapat ralat binaan, saya tidak dapat memuatkan komponen Vue dalam projek saya yang sangat mudah. Saya tidak faham mengapa, tetapi apabila cuba melihat halaman menggunakan Laravelserve, saya hanya mendapat halaman kosong.

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粉032900484276 hari yang lalu387

membalas semua(2)saya akan balas

  • P粉262073176

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

    Adakah anda cuba menukar tab dalam bilah daripada <Home /> 更改为 <home /> ? Seperti yang ditulis oleh pengguna lain, anda perlu menambah .default dalam baris tempat anda mengimport komponen

    balas
    0
  • P粉946336138

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

    Saya tidak boleh komen kerana markah saya, maaf terpaksa buat macam awning.

    Adakah anda pasti baris app.component('home', Home); ialah cara yang betul untuk mengimport comp? Kerana berdasarkan apa yang saya dapati, ini akan menjadi 

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

    Itu sahaja.

    balas
    0
  • Batalbalas