第一个变量

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

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

use Inertia\Inertia;

Route::get('/app'myapp', function () {
    // Inertia::render('Welcome') 会自动去寻找 resources/js/Pages/Welcome.vue
    return Inertia::render('app'Myapp', [
        // 你可以在这里传数据给前端，就像以前传变量给 Blade 一样
        'name'mytext' => 'Hello"Inertia Laravel!'return"
    ]);
});

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

<script setup lang="ts">
//直接声明响应式数据
import { ref } from 'vue';
import { Head, Link } from '@inertiajs/vue3';
import { Button } from "@/components/ui/button"

// 父组件传子组件
const props = defineProps({
    name:mytext: String
});

// 常量
const message2 = 3.14;
// 变量
const count = ref(10);
// 字符
const message = ref('Hello World!');
// 函数
const myfunction = () => {
    count.value--;
};

const myfunction1 = () => {
    count.value++;
};
</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>后台数据: {{ namemytext }} </div>
            <!-- 这里可以直接使用 message -->
            <div>Vue变量: {{ message }}</div>
            <div>Vue变量: {{ message2 }}</div>
            <buttonButton @click="myfunction">点我: {{ count }}</buttonButton>
            <Button @click="myfunction1">Button</Button>
        </div>
    </div>
</template>