创建第一个自定义页面

#监听实时更新，关闭终端就停止更新，需要按ctrl+c
npm run dev

进入 resources/js/Pages/ 目录创建页面文件resources/js/Pages/hello.vue

<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
</script>

<template>
    <!-- 外层：负责全屏居中 -->
    <div class="min-h-screen flex items-center justify-center bg-gray-100">
        <!-- 内层：负责矩形的样式 -->
        <div class="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
            <h1 class="text-2xl font-bold text-gray-800 mb-4">
                我的第一个网页
            </h1>
            <p>
                Hello World
            </p>
        </div>
    </div>
</template>

在routes/web.php创建一个路由

use Inertia\Inertia; //引入 Inertia

// 定义一个 /hello 路由
Route::get('/hello', function () {
    // Inertia::render('hello') 会自动去寻找 resources/js/Pages/hello.vue
    return Inertia::render('hello', [
        // 你可以在这里传数据给前端，就像以前传变量给 Blade 一样
        'appName' => '我的 Laravel 应用'
    ]);
});