用Laravel+React构建Web应用程序 [技术使用：Laravel Sail, Laravel Breeze, Inertia, TailwindCss, Vite]

2 年 ago
雅, 悟
3 minutes

本文想要做的事

我們將使用以下技術，使用Laravel + React來建構Web應用程式。

    1. 使用Laravel Sail创建Docker开发环境

 

    1. 使用Laravel Breeze Starter Kit在前端使用React（使用Inertia实现）

 

    1. Laravel Breeze的认证功能

 

    1. 使用Tailwind CSS进行样式装饰

 

    使用Laravel Vite构建前端部分

由于步骤繁多而复杂，我顺道留下备忘录并写成一篇文章…！

行动背景

- macOS    13.5.2
- PHP    8.2.11
- Laravel Framework    10.28.0
- react    18.2.0
- react-dom    18.2.0
- Composer    2.6.5
- node    v18.18.1
- npm    10.2.0
- laravel/sail    v1.25.0
- Docker    23.0.5
- laravel/breeze    v1.25.0
- inertiajs/inertia-laravel    v0.6.10
- @inertiajs/react    1.0.12
- vite    4.4.11
- tailwindcss    3.3.3
- MySQL    8.0.32

 

通过Laravel Sail构建Docker开发环境。

Laravel Sail是一个命令行接口，在Laravel中为我们提供了基于Docker容器的开发环境，它非常便捷。我们可以在一个小巧且轻量的”容器”中进行应用程序开发，而不会干扰本地机器上的软件和配置。
首先，我们需要创建一个新的Laravel项目（如果未安装Docker Desktop，请先安装然后执行）。

% curl -s "https://laravel.build/example-app" | bash

执行上述命令后，将在当前目录下创建一个新的Laravel应用程序目录。需要注意的是，可以将命令中的example-app部分更改为自己喜欢的应用程序名称，建议在更改后再执行命令。

然后，移动到创建的Laravel应用程序的目录，并启动Laravel Sail。

% cd example-app

% ./vendor/bin/sail up

您只需从本地浏览器访问http://localhost，并确保Laravel应用程序可以打开即可。
现在，您已经可以通过Docker容器环境开始开发了。但为了顺利进行开发，您需要事先更改时区和MySQL字符编码。有关具体步骤，请参阅另一篇文章。请看↓。

 

2. 使用Laravel Breeze Starter Kit（使用Inertia在前端实现React）

这一次我们将在前端使用React。在这种情况下，如果使用Inertia工具，它可以自动处理前端（React）和后端（Laravel）之间的协作。尽管使用Inertia需要进行一些配置，但使用Laravel Breeze的starter kit可以自动处理这些配置，所以更加方便。
因此，我们将引入Breeze。
请执行以下命令来安装Breeze。

% ./vendor/bin/sail composer require laravel/breeze --dev

安装Breeze后，将生成Breeze运行所需的文件组。由于本次使用React作为前端，因此最后添加了react（也可以指定vue以外的其他选项）。

% sail artisan breeze:install react

执行上述命令将添加所需的包依赖关系（如react和inertia等），以使用React开发前端。
让我们稍微看一下composer.json和package.json（以下代码只是部分摘录）。

{
    "require": {
    "php": "^8.1",
    "guzzlehttp/guzzle": "^7.2",
    "inertiajs/inertia-laravel": "^0.6.3",
    "laravel/framework": "^10.10",
    "laravel/sanctum": "^3.2",
    "laravel/tinker": "^2.8",
    "tightenco/ziggy": "^1.0"
    },
    "require-dev": {
        "fakerphp/faker": "^1.9.1",
        "laravel/breeze": "^1.25",
        "laravel/pint": "^1.0",
        "laravel/sail": "^1.18",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^7.0",
        "phpunit/phpunit": "^10.1",
        "spatie/laravel-ignition": "^2.0"
    },
}

{
    "devDependencies": {
        "@headlessui/react": "^1.4.2",
        "@inertiajs/react": "^1.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@vitejs/plugin-react": "^4.0.3",
        "autoprefixer": "^10.4.12",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.8.0",
        "postcss": "^8.4.18",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "tailwindcss": "^3.2.1",
        "vite": "^4.0.0"
    }
}

可以看出有很多依赖包已经被添加了。顺便提一下，composer.json 文件是用来描述后端（PHP / Laravel）开发所需的依赖包，而 package.json 则是描述前端（React）开发所需的依赖包（可能是）。

让我们在这里尝试在浏览器中打开应用程序。首先执行以下命令。

% npm install     # 依存パッケージのインストール
% npm run dev     # 開発サーバーの立ち上げ

在执行完指令后，你可以尝试从本地浏览器访问http://localhost，应该可以正常打开页面。外观看起来可能没有太大变化，但前端是用React（jsx）正确编写的。

附言：請確認React的進入點和路由配置。

如果您想尽快进入下一个步骤，可以跳过这些稍微详细的讨论。通过使用 Breeze 在前端引入 React，会自动添加许多目录/文件到 resources/js 目录以下。在这里，让我们更详细地查看这些新增的文件。

JSX 的入口点

jsx的入口点是resources/js/app.jsx文件。在这个app.jsx文件中，渲染了与指定路由对应的resources/js/Pages目录下的jsx文件。

以http://localhost/为例。根据routes/web.php中的配置，当访问’/’路径时，将渲染名为Welcome的jsx文件。

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

因此，当访问 http://localhost/ 这个URL时，resources/js/Pages/Welcome.jsx会被渲染到resources/js/app.jsx上（确切来说，app.jsx文件会进一步被加载到resources/views/app.blade.php上，成为一个页面）。
另外，在jsx的入口文件resources/js/app.jsx中，也引入了css的入口文件resources/css/app.css，所以app.css的样式会应用于所有的jsx文件。

import './bootstrap';
import '../css/app.css';     // ← app.cssのimport!!!!
// 以下略...

3. Laravel Breeze 的身份验证功能

スクリーンショット 2023-10-12 19.35.27.png

4. 使用TailwindCss进行装饰

下一步是引入 TailwindCss，它是一个 CSS 框架。如果你已经安装了 Breeze，那么 TailwindCss 已经安装好了。

TailwindCss 的配置

尽管已经可以直接使用TailwindCss，但在本文中，我们稍微详细地了解一下TailwindCss的配置。

TailwindCss的配置信息写在项目根目录的tailwind.config.js文件中。

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
		'./storage/framework/views/*.php',
		'./resources/views/**/*.blade.php',
		'./resources/js/**/*.jsx',
	],

	theme: {
		extend: {
			fontFamily: {
				sans: ['Figtree', ...defaultTheme.fontFamily.sans],
			},
		},
	},

	plugins: [forms],
};

这其中特别重要的是content部分。content部分描述了在哪个文件中加载TailwindCss。也就是说，在content部分中写下了希望使用TailwindCss的文件名。

在上述例子中，”./resources/views/**/*.blade.php”和”./resources/js/**/*.jsx”被写入了，所以在resources/views目录下的blade文件和resources/js目录下的jsx文件中都可以使用TailwindCss。

TailwindCss的入口点

需要理解TailwindCss的入口点。默认情况下，resources/css/app.css被认为是入口点。app.css中包含了@tailwind指令。

@tailwind base;
@tailwind components;
@tailwind utilities;

需要注意的是，必须在jsx的入口文件resources/js/app.jsx中导入app.css文件（*如果按照本文章的步骤进行，已经包含了导入的代码）。

import './bootstrap';
import '../css/app.css';     // app.css を importしている
// 以下略...

使用Laravel Vite构建前端

Vite（ヴィート）是一款为我们提供非常快速开发环境的最新前端构建工具，可以用于将代码构建为用于生产环境的前端资源。如果我们使用 Laravel 来构建应用程序，通常会使用 Vite 来将应用程序的 CSS 和 JavaScript 文件构建为用于生产环境的资源。

Vite的配置

如果按照本文所述的步骤进行，设置已经自动进行，并按照以下所述进行设置。
Vite的设置在项目根目录的vite.config.js文件中进行。在Plugins.laravel部分，需要指定jsx和css的入口点。关于css的入口点，根据前面的步骤中所述，已经在jsx方面进行了导入，所以在这里不需要写入css的入口点。

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',    // jsx のエントリポイントを記述
            refresh: true,
        }),
        react(),
    ],
});

加载 JSX 和 CSS

设置完Vite的入口点后，您需要在应用程序的根模板（在本例中是resources/views/app.blade.php）的head标签内添加@vite Blade指令。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <!-- 中略 -->
        <!-- ↓ ココ！！！！！ -->
        @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

快速执行Vite

# Viteを開発環境で実行する
% npm run dev

# 本番環境用にアセットをバンドルし、バージョン付けする
% npm run build

以上で、我們成功地使用Laravel + React建立了網頁應用程式！

请提供更多的上下文。这个词可以有多种含义和用法，需要更多信息才能给出准确的翻译。

 

✖
广告
将在 10 秒后关闭
bannerAds