简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Laravel專案中Vue 3元件無法顯示
P粉032900484
P粉032900484 2024-02-26 11:54:25
0
2
350

我已經嘗試了我能想到的一切，但儘管沒有建置錯誤，但我無法在我非常簡單的專案中載入 Vue 元件。我不明白為什麼，但在嘗試使用 Laravelserve 查看頁面時，我只是得到一個空白頁面。

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粉032900484
P粉032900484

全部回覆(2)
P粉262073176
P粉2620731762024-02-27 10:02:27 2樓

您是否嘗試將刀片中的標籤從 <Home /> 更改為 <home /> ？ 正如另一個使用者所寫，您必須在導入元件的行中新增 .default

點贊 +0
新增回覆
P粉946336138
P粉9463361382024-02-27 00:27:42 1樓

由於我的分數，我無法發表評論，抱歉必須像遮陽篷一樣做。

您確定 app.component('home', Home); 行是匯入 comp 的正確方法嗎？ 因為根據我的發現，這將是

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

就是這樣。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！