使用 Inertia.js、React.js 和 Vite.js 设置 Laravel 应用

2024-05-27 渥太华微生活

1_dzkV_JblRNoZoGZngXPhXA.jpg

使用 Inertia.js、React.js 和 Vite.js 设置 Laravel 应用:


1、创建应用程序

composer create-project laravel/laravel laravel-react-inertia

用下面命令运行本地服务器,检查网页看看 laravel 是否安装成功。

php artisan serve


2、服务器端设置 (Server-side setup)

1) 安装 Inertia.js 编译器依赖项:

composer require inertiajs/inertia-laravel

2) 将文件 resources/views/welcome.blade.php 重命名为 app.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>
        @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/js/app.jsx'])
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

3) 生成 Inertia 中间件

php artisan inertia:middleware

4) 打开 bootstrap/app.php 文件,添加该中间件:

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use App\Http\Middleware\HandleInertiaRequests;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
        $middleware->append(HandleInertiaRequests::class);
    })
    ->withExceptions(function (Exceptions $exceptions) {
        //
    })->create();

3、客户端设置 (Client-side setup)

1) 安装所有依赖项:

npm install @inertiajs/inertia-react @inertiajs/react @vitejs/plugin-react react react-dom

2) 更新 vite.config.js 文件:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react(),
    ],
});

3) 将 resources/js/app.js 重命名为 app.jsx,并将以下代码粘贴到其中:

import React from 'react'
import {createRoot} from 'react-dom/client'
import {createInertiaApp } from '@inertiajs/inertia-react'
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers'

createInertiaApp({
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
    setup({el, App, props}) {
        createRoot(el).render(<App {...props} />)
    },
});

4) 在 js 文件夹中创建一个“Pages”文件夹,并在该文件夹中创建一个名为“Test.jsx”的测试组件:

export default function Test() {
    return (
        <h1>This is test component</h1>
    )
}

4、渲染组件

打开 routes/web.php,尝试在主页上渲染 Test.jsx:

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Test');
});

5、运行测试

在一个终端运行 VITE server

npm run dev

在另一个终端运行 Laravel server

php artisan serve

在浏览器中检查 http://127.0.0.1:8000  是否运行成功。

编者注:新闻取自各大新闻媒体,新闻内容并不代表本网立场!文字和图片来自网络,版权归原作者所有。如有侵权,请速联系小编,立即删除。

314
全部评论 (0)
展开快速发表评论
二维码 | 渥太华微生活
<广而告之>
缩略图

看新闻?

渥太华微生活

- 新闻|活动|优惠|房屋|汽车|留学|移民|工作|理财|旅游|美食|健康|宠物|种植|文化|时尚|科技|历史|体育|黄页


缩略图

刷视频?

传奇视频

- 电影 | 电视剧 | 综艺 | 小品 | 动漫 | 戏曲 | 短视频


缩略图

听音频?

传奇音频

- 音乐 | 有声小说 | 评书 | 相声


缩略图

找乐趣?

传奇活动

- 渥太华 | 多伦多 | 温哥华 | 蒙特利尔 | 卡尔加里


缩略图

想省钱?

传奇打折

- Amazon打折专区 | Temu打折专区 | 打折资讯


缩略图

租房子?

传奇租房

- 渥太华 | 多伦多 | 温哥华 | 蒙特利尔 | 卡尔加里

科技专栏