第一个变量

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

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

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

 

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

<template>
    <div>后台数据: {{ name }} </div>
    <!-- 这里可以直接使用 message -->
    <div>Vue变量: {{ message }}</div>
    <div>Vue变量: {{ message2 }}</div>
</template>

<script setup>
// 1. 直接定义 props，无需 createApp 或 setup() 函数
const props = defineProps({
    name: String
});

// 2. 直接声明响应式数据
import { ref } from 'vue';
const message = ref('Hello World!');
const message2 = 3.14;
</script>