一. Jetstream简介

Laravel 8 引入 Jetstream 作为前端 UI 库， Jetstream 是一个为下一代 Laravel 项目全新设计的前端 UI 扩展包，提供了基本的用户认证相关功能，并提供了两个必要的前端开发技术栈供我们选择。

1. Livewire + Blade

好处是不需要学习 Vue、React 等前端框架，可以完全使用 PHP 代码编写页面组件)，同时默认兼容的 CSS 框架也从 Bootstrap 切换到了 Tailwind

2. Inertia.js + Vue

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

我们将基于 Laravel + Vue 框架进行项目开发，所以使用Jetstream提供的 Inertia.js + Vue作为开发前端组件的技术栈。

二. Jetstream + Inertia安装

1. JetStream安装

为了提高下载速度，先将项目的composer源改为阿里云

composer config repo.packagist composer https://mirrors.aliyun.com/composer/

引入Jetstream模块

composer require laravel/jetstream

安装好jetstream模块之后，之前使用的登录测试页面会报错：

http://homestead.win/test/123123
Class "Inertia\Inertia" not found

估计是因为中间件被加入了Inertia，而我们还没安装好的缘故。

2. Inertia组件安装

php artisan jetstream:install inertia

这一步安装好之后，之前的首页刷新下可以发现错误被改变了。

Table 'homestead.sessions' doesn't exist

说明inertia中间件已经安装好，只是因为session被改成了走DB途径，而对应DB表格还没有迁移好，所以报错。
这一步会追加很多的新文件进来，而且会修改package.json，这个有点类似composer.json，是为了给下一步使用的。

3. npm install

此时，项目文件中并没有 node_modules文件夹。
执行npm install后，npm会根据package.json配置文件中的依赖配置下载安装。

注意一下，win版本模拟器，可能会遇到下载安装失败，错误有两种：

enoent ENOENT: no such file or directory, open ‘/home/vagrant/Laravel/Projects/laravel-project-win/code/node_modules/cssnano-util-raw-cache/node_modules/supports-color/package.json.1846535492’
npm ERR! enoent This is related to npm not being able to find a file
这种我也没找到原因，不过发现，将npm升级之后，很大概率会成功。可能是版本问题吧。

sudo npm install npm -g

syscall symlink
这个报错是因为win版本虚拟机不支持软连接，而npm需要借助这个。所以这里需要将命令修改为

npm install --no-bin-links

4. npm run dev

如果是Mac机器的虚拟机，这里直接执行就好了。但是对于Win这里还有点bug。
package.json文件里定义的development:‘mix’，npm会报错。
这里需要改成laravel7版本的内容：

"dev": "npm run development",
"development": " NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-options-poll=1000",
"hot": " NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": " NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"

修改后执行：

npm run dev -no-bin-links

成功后打印：

   Laravel Mix v6.0.13
✔ Compiled Successfully in 17480ms/js/app.js │ 1.9 MiBcss/app.css │ 3.88 MiB
webpack compiled successfully

5. 数据库迁移

这个直接执行就好了，没坑

php artisan migrate

6. 完成

重新打开首页，可以发现首页右上角多出来两个链接，login和register
至此，基于JetStream的登录模块已经集成进来了。

Laravel开发系列四：安装JetStream相关推荐

WordPress版微信小程序开发系列(二):安装使用问答
自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象.这套程序主要面对的用户是wordpress网站的站长,如果wordpress站想在微信的生态圈得到推广,小程序成为一种重要的 ...
BizTalk 开发系列(四十二) 为BizTalk应用程序打包不同的环境Binding
更多内容请查看:BizTalk动手实验系列目录 BizTalk 开发系列我们在使用微软或者其他公司提供的BizTalk应用程序MSI包的时候经常会有一个目 ...
微信小程序开发系列四：微信小程序之控制器的初始化逻辑
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法这个教程的前两篇文章,介绍了如何 ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
s3c2410上搭建QT/Embedded4.8.5开发环境(四)--安装intel-x86 X11平台qt库qt-everywhere-opensource-src-4.8.5...
[目标板]s3c-2410 [虚拟机]CentOS6.4 kernel-2.6.32 [编译器]gcc-4.4.6 目前QT官网的4.8.5的几个版本中Qt libraries 4.8.5 for L ...
数据处理系列(四) 安装Elasticsearch用以存储和查询数据
为什么80%的码农都做不了架构师?>>> 准备工作 ### 添加一个额外用户用以启动 Ela 因为Ela不支持root启动adduser tmp## 设置密码 passwd t ...
web控件开发系列(四) 自定义控件属性(下)
控件在WEB开发时经常要用到,虽然有部分已经存在工具箱里,但有时总需要根据自己的要求,开发一些合适自己的控件.接上一节,已经说过了控件的属性, 例如,我们需要一组属性的集合时,这时我们需要用到的就是复 ...
BizTalk 开发系列(四十) BizTalk WCF-SQL Adapter读取SQL Service Broker消息
SQL Service Broker 是在SQL Server 2005中新增的功能.Service Broker 为 SQL Server 提供队列和可靠的消息传递,可以可用来建立以异步消息为基础的 ...
ASP.net控件开发系列(四)
属性与属性窗格在上篇文章中,和大家探讨了属性和aspx文件中的HTML style 标签和文本的关系,遗漏了两点: 1.EnCodedInnerDefaultProperty和InnerDefaul ...

Laravel开发系列四：安装JetStream

文章目录