Laravel开发系列四：安装JetStream

一. 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版本模拟器，可能会遇到下载安装失败，错误有两种：

1. 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

2. 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 MiB
   css/app.css │ 3.88 MiB
webpack compiled successfully

5. 数据库迁移

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

php artisan migrate

6. 完成

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