我已經嘗試了我能想到的一切,但儘管沒有建置錯誤,但我無法在我非常簡單的專案中載入 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', [ // ]);
您是否嘗試將刀片中的標籤從
<Home />
更改為<home />
? 正如另一個使用者所寫,您必須在導入元件的行中新增 .default由於我的分數,我無法發表評論,抱歉必須像遮陽篷一樣做。
您確定
app.component('home', Home);
行是匯入 comp 的正確方法嗎? 因為根據我的發現,這將是就是這樣。