Laravel 8 引入 Jetstream 作为前端 UI 库

  在本月 8 号，Laravel 8.0 正式发布，随后 Vue 3.0也正式发布，不过围绕 Vue 3 生态的很多库还处于 beta 阶段，所以目前学院君这里的 Vue 实战教程主要还是基于 Vue 2.x，不过后面会花几个篇幅的教程简单介绍下 Vue 3 的新特性。

  我们将基于 Laravel + Vue 框架进行项目开发，所以也需要关注下新版本 Laravel 框架前端组件技术栈相关的更新，这里需要注意的是 Laravel 8.0 引入了全新的 Jetstream 扩展包提供前端 UI 脚手架代码，如果你之前使用的是 laravel/ui 包（Laravel 6.0 引入）或者更早版本直接集成在新安装 Laravel 项目中的前端脚手架代码（Laravel 5.3 开始引入 Vue 作为默认前端组件开发框架）开发前端 JavaScript 组件，同时使用 Laravel 默认兼容的 Bootstrap CSS 框架，在 Laravel 8 中这些可能都将不再适用。

  Jetstream 是一个为下一代 Laravel 项目全新设计的前端 UI 扩展包，提供了基本的用户认证相关功能和必要的前端开发技术栈，只是这一次 Laravel 默认选择使用 Livewire + Blade 进行前端组件开发（好处是不需要学习 Vue、React 等前端框架，可以完全使用 PHP 代码编写页面组件），同时默认兼容的 CSS 框架也从 Bootstrap 切换到了 Tailwind。

  当然，Laravel 并不强制你使用这一套技术栈，所以 Jetstream 还提供了另一套基于 Inertia.js + Vue 开发前端组件的技术栈，这样一来，你仍然可以用回之前可能已经熟练掌握的 Vue 框架，对于 Tailwind 框架也是如此，你完全可以切换到其他 CSS 框架，只是 Laravel 官方提供的示例界面代码可能需要重构，或者你完全可以选择不使用 Jetstream，依然使用 laravel/ui 扩展包，或者不用这些官方扩展包，完全自行搭建前端技术栈。

  Inertia 技术栈简介

  接下来，学院君给大家简单演示下如何基于 Laravel Jetstream 扩展包提供的 Inertia + Vue 技术栈开发前端组件。

  注：基于 laravel/ui 扩展包前面已经演示过，在 Laravel Jetstream 中基于 Livewire + Blade 开发前端组件示例则可以参考这篇教程。

  Inertia.js支持利用现有服务端框架路由和控制器（目前支持 Laravel 和 Rails 框架），在客户端基于 JavaScript 框架编写组件（目前支持 React、Vue、Svelte）来快速构建单页面应用，因此它不是一个新框架，而是通过适配器粘合前后端框架的「胶水」，构建 Inertia 单页面应用也不像传统的 Vue 单页面应用，我们可以使用现有 Laravel 应用的后端路由来取代 Vue Router，除此之外，依然可以使用 Vue 框架其它的强大功能来构建页面组件，换言之，我们可以使用 Laravel + Vue 编写单页面应用但无需了解复杂的客户端路由技术，在这个技术栈中，Vue 退化成了纯模板语言。

  使用 Inertia + Vue 编写单页面组件初始化 Jetstream + Inertia

  开始之前，假设你已经新安装了一个 Laravel 8 项目，然后需要通过 Composer 安装 Jetstream 扩展包：

  <pre class="code-snippet__js" data-lang="javascript">composer require laravel/jetstream</pre>

  接下来，初始化带有 Inertia 技术栈的 Jetstream：

  <pre class="code-snippet__js" data-lang="css">php artisan jetstream:install inertia</pre>

  运行如下代码初始化前端依赖：

  <pre class="code-snippet__js" data-lang="nginx">npm install && npm run dev</pre>

  编译成功后，运行数据库迁移命令初始化相关数据表：

  <pre class="code-snippet__js" data-lang="nginx">php artisan migrate</pre>

  安装 & 初始化完成后，可以在 resources/js 目录下看到新创建的脚手架组件：

  所有的 Inertia 页面组件默认位于 Pages 目录下，Jetstream 目录下存放的则是 Jetstream 自带的组件。

  基于 Inertia 编写 Vue 页面组件

  接下来，我们来创建一个用于发布文章的页面组件，其中还包含了独立的文章发布表单组件，在 Pages 目录下新建 Post 子目录用于存在文章相关页面组件，然后在该目录下新建 PostCreateForm.Vue 作为表单组件js表单提交之前验证，以及 Create.vue 作为页面组件。

  友情提示：你可以先阅读 Inertia 官方文档熟悉 Inertia 基本语法，以及 Jetstream Inertia 部分文档了解如何在 Laravel 中编写 Vue 组件。

  先来编写表单组件 PostCreateForm.vue：

  <pre class="code-snippet__js" data-lang="xml"> `` `` 发布新文章`` `` `` 这里是发布新文章页面`` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` `` {{ form.body }}`` `` `` `` `` `` `` 立即发布`` `` `` ` `import JetLabel from './../../Jetstream/Label'``import JetButton from './../../Jetstream/Button'``import JetInput from './../../Jetstream/Input'``import JetInputError from './../../Jetstream/InputError'``import JetFormSection from './../../Jetstream/FormSection'`` ``export default {`` components: {`` JetLabel,`` JetButton,`` JetInput,`` JetInputError,`` JetFormSection`` },`` `` data() {`` return {`` form: this.$inertia.form({`` title: '',`` author: '',`` body: '',`` }, {`` bag: 'storePostInformation',`` })`` }`` },`` methods: {`` storePostInformation() {`` this.form.post('/post', {`` preserveScroll: true`` }).then(() => {`` this.$refs.current_title.focus()`` });`` }`` }``}</pre>

  就是一个正常的 Vue 单文件组件，只是应用了 Inertia 内置的 API 方法来提交表单，以及渲染表单验证错误信息。

  然后在 Create.vue 中引入这个表单组件渲染发布文章页面：

  <pre class="code-snippet__js" data-lang="xml"> `` `` `` 发布文章`` `` `` `` `` `` `` `` `` `` ` `import AppLayout from './../../Layouts/AppLayout'``import JetSectionBorder from './../../Jetstream/SectionBorder'``import PostCreateForm from "./PostCreateForm";`` ``export default {`` components: {`` AppLayout,`` JetSectionBorder,`` PostCreateForm`` },``}</pre>

  在这个页面组件中，使用了 Jetstream 提供的 AppLayout 组件进行页面布局。至此，就完成了前端页面开发。

  编写后端路由和控制器代码

  最后，我们需要在 Laravel 应用后端注册路由和对应的控制器方法，来完成前端页面组件的渲染以及与后端的接口交互。

  控制器方法

  首先创建一个 PostController 控制器：

  <pre class="code-snippet__js" data-lang="css">php artisan make:controller PostController</pre>

  分别编写 create 方法用于渲染发布文章页面组件以及 store 方法用于处理表单提交数据的验证和处理：

<p><pre class="code-snippet__js" data-lang="xml">