Laravel 8 前端生存指南（Jetstream / Fortify / Bootstrap / Tailwind / Inertia / Livewire / Vue / React）

英文原文 / 翻译 / 1677 / 4 / 创建于 3年前 / 1 个改进

Laravel

关于 laravel 前端的这两个脚手架有很多争议和困惑，我不会偏向他们中的任何一个，争论谁对谁错没有意义。

重要的是如何让大家更好的理解他们。无论是新手还是老手对于这些脚手架的“生态系统”都有很多相同的困惑。

因此, 本文将尝试提供一个 laravel 前端脚手架的搭建指南。

提示：如果你仅仅只是想 知道怎么快速使用，并不想知道不同方案的详细解释， 请直接跳转到文章的最后 。

解决方案概述

Laravel Jetstream

Laravel Jetstream 是 Laravel 的新应用程序扩展。

Jetstream 为你的新项目提供了一个更好的开始。它包含了 登录，注册，邮箱验证，双重验证， Session 管理，通过Laravel Sanctum提供Api支持 还有可选择的 团队管理。

Jetstream 使用了 Tailwind CSS ，这个 CSS 的框架将成为 Laravel 社区的标准。

两种风格

Jetstream 允许你在以下两种前端技术栈里选择:

Livewire + Alpine.js
Inertia.js + Vue

虽然这些工具相对较新，但它们正越来越受欢迎。

你可能会想 “我在写我的应用的时候是选择 Livewire 还是 Inertia 呢”？

这是个好问题，而且答案更好：不, 在接下来的应用中你不需要用它们。你仅仅需要安装 Jetstream ，保留它们，用不同的框架去写你的应用。

如果您打算这样做，建议您使用Livewire版本。

如果您不知道Livewire是什么，它是一个可以让你创建共同通信Blade视图和后端组件类的基础工具。这使您可以仅使用后端代码来构建动态UI。

因此，如果您不知道要使用哪个堆栈，请使用Livewire，因为每个Laravel开发人员都了解Blade。当您知道blade时，Livewire是非常容易理解的。这真的感觉像魔术。

如果您对Vue.js感兴趣并喜欢使用它，那么Inertia版本是一个不错的选择。前端是用几乎纯的Vue编写的。Inertia仅充当Laravel后端和Vue组件之间的层。

与编写API路由不同，Inertia可以让您从控制器返回的响应感觉就像是在 return view(...)，但您可以在前端使用 Vue 。

特征

Jetstream 具有其他脚手架工具所没有的一些很酷的功能。

它具有一个专用页面，用户可以在其中编辑其名称，电子邮件地址和(可选)个人资料照片。

他们还可以通过单击一个按钮删除其帐户(当然是通过密码模式确认的)。对于每个使自己的应用符合GDPR的人来说，这都是一个巨大的胜利。

它还支持两要素验证。这意味着用户可以选择启用2FA-向他们显示一个QR码，他们将使用像Google Authenticator等应用程序进行扫描，并提供恢复密钥。他们可以将密码存储在1Password之类的密码管理器中，或者如果它们是老式密码，则将其记下并放入物理保险库🔒中。

它第一次集成了 Laravel Sanctum (一个 API 认证的包). 用户可以生成 API 密钥 并为它们指派权限。

此外它还提供了一个非常高级的(可选) 团队功能。来自这些文档：

Jetstream's 团队功能允许每个注册用户创建并属于多个团队，每一个注册用户都属于 “个人” 的团队。

每一个用户在 Jetstream 应用中都有一个 “当前团队”。用户可以主动查看这个团队的信息。例如，你创建了一个日历的应用，你的应用中需要展示用户当前团队日历中标注的将要发生的事件。你可以用这个方法访问用户当前团队 $user->currentTeam 的模型关联关系。

最后，我强调一点 这些功能都是可选的。如果你不想使用它们，可以禁用掉它们。

用法

请注意！Jetstream属于您的应用程序起点，只能在最开始的阶段安装，其他任何开发阶段都不能在继续安装了。

安装Jetstream的运行代码：

laravel new my-app --jet

(确保您的Laravel安装程序是最新的。)

安装程序过程中将会让你选择(Livewire 或者 Inertia)两个版本。然后，它将安装Jetstream，之后您将在.env中配置数据库信息并运行数据库迁移代码

php artisan migration

最终。您可以在浏览器中访问您的项目并开始使用Jetstream。

Laravel Fortify

文档说明：

Laravel Fortify是Laravel的前端以匿名身份验证后端

这表示它不是一个前端脚手架工具，而是在后台渲染的前端工具。Fortify 在 Jetstream 中提供身份认证逻辑。

它提供身份认证的所有后台逻辑 (如果你使用过 Laravel 7，那就是 Auth 控制器)

你只需要简单地「插入」视图到后台逻辑，如下面的代码：

use Laravel\Fortify\Fortify;

Fortify::loginView(function () {
    return view('auth.login');
});

Fortify 也可以定制后台逻辑。例如，你可以设置用户如何通过验证(登录)的方式：

Fortify::authenticateUsing(function (Request $request) {
    $user = User::where('email', $request->email)->first();

    if ($user && Hash::check($request->password, $user->password)) {
        return $user;
      }
})

laravel/ui

laravel/ui 是个非常便捷的基于 Bootstrap CSS 框架的脚手架。它也可以根据你的喜好选择 Vue/React 。

它并没有 Jetstream 的高级特性，它仅提供 login， register，和 forgot/confirm/reset password 视图。它是一个遗留项目，因此并不会添加其它的新特性。

因为这个原因，并不推荐把它当做 Jetstream 。然而，如果你真的想要使用 Bootstrap ，这是 官方的途径。

旁注：这里有一些 使用 Bootstrap 的社区版 Jetstream。例如：github.com/nascent-africa/jetstrap。我不会推荐这些方案，因为我没有使用它们，如果你真的想使用 Bootstrap 和 Jetstream 特性，那可能是些好的方案。

个人观点，我会推荐 学习 Tailwind CSS。Tailwind 比 Bootstrap 更完美地适配 Jetstream 。虽然 TALL stack ( Tailwind, Alpine, Livewire, Laravel ) 的学习曲线比 Bootstrap 要长，不过努力会有回报并且使用这些新技术会 更加享受开发。

这些是建立在你已经了解 Web 开发并且已经具备了 Laravel 的基础知识的前提下。如果没有具备这些基础，请先集中精力学习这些内容。如果你仅仅只需要一个可运行的应用，并不想思考设计或者 CSS 的内部原理，Bootstrap 会更容易上手。因此，如果您仅仅学习 Laravel ，所有的 CSS 部分基本上被隐藏在 Bootstrap 中，因此您无需过多考虑和担心。

第三方扩展

还有一些其他的第三方扩展。它们的用法和 laravel/ui 使用逻辑相同，但是它们会为你提供更多的选项而不仅仅是 Vue 和 React 。

有些比较热门的:

TALLstack
Inertia.js
Tailwind CSS (没有全前端框架)

也有其它选择。你可以根据你的需求进行搜索。例如，尝试搜索「 laravel react preset 」或「 laravel react spa template 」。它们最近更新过，都适宜使用。

你的解决方案

最终，你也可以建立自己的解决方案。就如 Fortify 中提到的那么容易，它提供在视图中需要的所有后台逻辑。

但你 不是必须 使用 Fortify 。查看 authentication docs 。里面非常直接地说明如何写一个认证后台。如果你需要像「 forgot password 」这样的功能，使用 Fortify 是个好的选择。

这里有一个额外的建议：只在 Jetstream 的视图里面使用 Fortify，但不要在 Jetstream 其它地方使用。

你可能会想「但我并不想使用 Livewire 或者 Inertia」

还好，你并不是必须使用它们。阅读一下 Jetstream docs 的节选：

Laravel Jetstream 会为你的项目自动搭建好登录，双重验证，注册，密码重置和邮箱验证的视图。简而言之，不管你选择哪个技术，这些模板是写在 Blade 里面，并且不会使用 JavaScript 框架。

这表示这些用于「客户」页面的视图不一定要使用Livewire 或者 Inertia。它只是一个使用 Fortify 后台的 Blade （就像控制器的功能那样）。

这是一件非常酷的事情 - 从 Jetstream 复制这些与前端框架无关的视图然后在 Fortify 应用中使用它们。这会让你觉得 这是使用 Tailwind CSS 而不是 Bootstrap 的 laravel/ui。

安装 Fortify
发布 Jetstream 视图，复制它们，把它们移动到 views/components/jet
- 你只需要使用它们中的一部分，但如果你想快速地开始，把它们全部发布可以确保它们会正常工作。
- 提示：如果在安装 Jetstream 的时候 选择 Inertia ,可能会生成更少的 Blade 视图。
把所有 x-jet- 前缀的文件重命名为 x-jet. 前缀。
复制 package.json
复制 app.css
复制 webpack.mix.js
复制 tailwind.config.js
npm install
npm run watch
在浏览器中查看

注意：这个流程有点繁琐，但可能正是许多人想要的，可以在 Twitter thread 中看到我的解释。它非常像旧的 Laravel make:auth 风格，但它使用更现代的 Tailwind UI 视图。

如果有足够多人想这样做，我将会建立和维护它，或者尝试把它当作第三个选择整合到 Jetstream 中。

你应该使用什么

如你所见，在 Laravel 中有许多前端脚手架可以使用。很难作出选择。

如何选择主要还是看你想要什么技术和特性。

我不会在意 Jetstream 使用的技术是否成熟，因为 - 如上所述 - 你可以很方便地让 Jetstream 使用其它技术，然后把应用余下的部分完成。

我是一个初学者，我不知道我是否可以使用 Tailwind ，我从没有用过它

如果你熟悉 Bootstrap ，你可以先从带有 Bootstrap 的 laravel / ui 入手。
如果你还没有了解过 Bootstrap，学习 Tailwind CSS 是一个不错的选择。相比 Bootstrap 而言，它将会带给你更多的 CSS 知识，并且线上有很多现成的组件可以快速构建UI。
Tailwind 最主要的缺点就是没有 如此多 像 Bootstrap 那样可以复制粘贴的组件。