第一个变量

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

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

use Inertia\Inertia;

Route::get('/myapp', function () {
    return Inertia::render('Myapp', [
        'mytext' => "Inertia 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({
    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>后台数据: {{ mytext }} </div>
            <!-- 这里可以直接使用 message -->
            <div>Vue变量: {{ message }}</div>
            <div>Vue变量: {{ message2 }}</div>
            <Button @click="myfunction">点我: {{ count }}</Button>
            <Button @click="myfunction1">Button</Button>
        </div>
    </div>
</template>