使用 Inertia.js + Vue.js + Tailwind CSS 设置 Laravel
注意：本指南使用Laravel 8编写，但它在Laravel 9上也能100%正常工作。
Laravel 是最受欢迎的开源PHP框架。我从第4个版本就开始使用它，今天我们庆祝第9个版本的发布。这是多么卓越的成就！
这个PHP框架的美丽之处不仅在于编写代码的便捷性，还在于其背后的社区，他们总是寻找新的方法来改进代码，开发新的包，并推动与其他优秀框架的集成。
例如，如果没有Laravel的创始人Taylor Otwell，我认为Vue今天不会这么受欢迎。他在多年前的一条推文中表示，相比React，Vue实际上更容易学习……我完全同意。所以，即使Laravel为这两种JS框架提供了脚手架，我仍然会选择Vue 而不是 React，因为它更容易。
我想要指出的是，Laravel 总会尝试采用和支价新的酷JS框架或任何其他真正的游戏改变者工具。 Inertia.js 和 Tailwind CSS 是被添加到书中去的另外两个真正令人惊叹的工具。
在我们深入探讨之前，我们只是想确保我们拥有所有需要的工具。我们将使用PHP 8，所以请确保您已安装它，Composer 和 NPM。我将简要介绍如何安装Composer 和 NPM。
安装 Composer
如果您已经安装了 Composer，则可以跳过以下命令部分
php -r "copy('https://getcomposer.org.cn/installer', 'composer-setup.php');"
php -r "unlink('composer-setup.php');"
php composer-setup.php --install-dir=/usr/local/bin
我们刚刚安装了 Composer 并将其移动到我们的 /usr/local/bin 目录，现在在终端中全局可用的 composer 命令将可用。
我们还需要做的另一件事是将 Composer 的供应商 bin 目录添加到 $PATH 中。您可以在官方 Laravel 文档中了解更多信息这里。
对我而言，在 Windows 11 的 WSL2 Ubuntu 上，最简单的方法是将路径添加到 .bashrc。因此，运行 nano ~/.config/.bashrc 并在文件末尾添加 Composer 的供应商 bin 目录路径
export PATH=~/.config/composer/vendor/bin:$PATH
现在保存并运行 source ~/.config/.bashrc 来刷新配置。
安装 NodeJs
我们还需要 NodeJS 来使用包管理器 npm。在 Ubuntu 上安装它，我们只需使用以下命令
sudo apt update
sudo apt install nodejs
现在 npm 应该已经全局可用
npm -v #retuns the current version
安装 Laravel
要安装 Laravel，您可以使用 Laravel Sail，它将启动一个 Docker 容器，或者您可以使用传统的 Laravel 安装程序。我在 Windows 11 + WSL2 运行 Ubuntu，我喜欢 Laravel 安装程序，所以我需要逐个运行以下命令。请注意，我在使用 Laravel 8 和 PHP 8.0。
确保我们处于所需的文件夹中，我们将全局引入 Laravel 的安装程序，然后使用它来创建一个名为 "awesome-app" 的新应用程序（这将自动创建具有相同名称的文件夹）。
composer global require laravel/installer
laravel new awesome-app
cd awesome-app
npm install #installs all the dependencies
如果 laravel new awesome-app 返回 laravel: 命令未找到，请确保您已将 Composer 的供应商 bin 目录添加到 $PATH 中（见上文）。
现在我们已经完成了安装，我们可以继续添加 Inertia.js、Vue.js 和 Tailwind CSS。
安装 Tailwind CSS
Tailwind CSS 需要最少的努力。我们只需安装 postcss 和 autoprefixer。
npm install -D tailwindcss postcss autoprefixer
让我们创建 tailwind 配置文件...
npx tailwindcss init
...并添加我们的模板文件，以便 Tailwind 的 JIT 知道我们模板中使用了哪些类并生成它们。所以打开 tailwind.config.js 并将以下行 ./resources/js/**/*.{vue,js} 添加到 content 中，使文件看起来像这样
module.exports = {
content: ["./resources/js/**/*.{vue,js}"],
theme: {
extend: {},
},
plugins: [],
};
我们还需要将 Tailwind 的指令添加到 resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
最后一件事是要求 Tailwind 在 webpack.mix.js 中，它使用 Laravel Mix 构建我们的资产。我们稍后会回到 webpack 配置文件，但现在它必须看起来像这样
const mix = require("laravel-mix");
mix.js("resources/js/app.js", "public/js").postCss(
"resources/css/app.css",
"public/css",
[require("tailwindcss")]
);
安装 Vue.js
我们将使用 Vue 的第 3 版。请注意，截至 2022 年 2 月 7 日，版本 3 已成为默认版本。
Vue 3 有两种不同的 API 风格。它仍然支持 Vue 2 的选项 API，但它提供了 Composition API。如果您不理解这是什么，可以阅读此简短介绍这个。为了简单起见，我们将使用 Options API，因为大多数开发者已经习惯了它，并且一直在使用它。
所以让我们添加 Vue 3
npm install vue@next
安装 Inertia.js
首先，我们需要安装 Inerta 的服务器端包
composer require inertiajs/inertia-laravel
接下来，我们需要创建 Inerta 中间件，该中间件处理请求，并帮助我们与所有 Vue 视图共享数据，类似于 View::share()。
php artisan inertia:middleware
HandleInertiaRequests.php 将在 app/Http/Middleware 内创建。我们只需将此中间件添加到 app/Http/Kernel.php 中的 web 中间件组即可
'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],
接下来是惯性框架的客户端。因为我们在使用 Vue 3，所以我们将同时安装惯性框架以及 Vue 3 适配器。
npm install @inertiajs/inertia @inertiajs/inertia-vue3
让我们加入惯性进度条。它将在页面导航之间用作加载指示器。
npm install @inertiajs/progress
惯性框架使用 Laravel 的路由，所以不需要使用客户端路由器，但是为了利用 Laravel 的 web.php 路由，我们需要在 DOM 中传递它们。最简单的方法是使用 Ziggy。让我们安装 Ziggy。
composer require tightenco/ziggy
现在我们可以在我们的 blade 模板中，使用 @routes 刀片指令来将 web.php 路由暴露给客户端。
将一切 glued 一起
现在我们已经安装好了一切，并准备好了开始使用。我们已安装了 Vue 3、惯性 和 Tailwind CSS。
让我们首先设置我们唯一的一个 blade 模板。我们将 resources/views 中的 welcome.blade.php 重命名为 app.blade.php。我们也将清除所有内容并替换为以下内容
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@routes
<link href="{{ asset(mix('css/app.css')) }}" rel="stylesheet">
<script src="{{ asset(mix('js/manifest.js')) }}" defer></script>
<script src="{{ asset(mix('js/vendor.js')) }}" defer></script>
<script src="{{ asset(mix('js/app.js')) }}" defer></script>
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
首先，我们会注意到我们没有设置任何 <title>。这是因为我们需要它是动态的，并且我们可以使用 Inertia 的 <Head> 组件来设置它。这也是为什么我们看到我们添加了 @inertiaHead 指令的原因。
我们添加了 @routes 指令以便在文档的 <head> 中传递 Laravel 的路由。
我们导入了我们的 app.css 和其他的几个我们稍后打算处理的 .js 文件。
在 <body> 中，我们只使用了 @inertia 指令，该指令渲染一个带有使用 data-page 属性传递的大量数据的 div 元素。
Ziggy 设置
让我们回到 Ziggy，并生成包含所有我们路由的 .js 文件。我们稍后会将该文件导入到我们的 app.js 中。
php artisan ziggy:generate resources/js/ziggy.js
为了在 Vue 中解决 ziggy 的问题，我们必须在 webpack.mix.js 中为 Vue 驱动器添加一个别名。
const path = require("path");
// Rezolve Ziggy
mix.alias({
ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue"),
});
设置 app.js
接下来，让我们设置我们的 app.js 文件。这是我们将在 blade 模板中加载的主要文件。
你可以从
resources/js中删除bootstrap.js，它不再需要。
现在打开 resources/js/app.js，删除其中的所有内容，并添加以下代码块
import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { ZiggyVue } from "ziggy";
import { Ziggy } from "./ziggy";
InertiaProgress.init();
createInertiaApp({
resolve: async (name) => {
return (await import(`./Pages/${name}`)).default;
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.component("Link", Link)
.component("Head", Head)
.mixin({ methods: { route } })
.mount(el);
},
});
这表示我们导入了 Vue、Inertia、Inertia Progress 和 Ziggy，并创建了一个 Inertia App。我们还把 Link 和 Head 组件作为全局变量引入，因为我们将会大量使用它们。
Inertia 会从 Pages 文件夹加载我们的页面，所以我将在这个文件夹中创建 3 个演示页面。如下所示
每个页面将包含以下模板。将根据文件名替换 Homepage 文本。
<template>
<h1>Homepage</h1>
</template>
下一步是将在 webpack.mix.js 文件中添加缺少的部分。一切都应该是这样的
const path = require("path");
const mix = require("laravel-mix");
// Rezolve Ziggy
mix.alias({
ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue"),
});
// Build files
mix.js("resources/js/app.js", "public/js")
.vue({ version: 3 })
.webpackConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "resources/js"),
},
},
})
.extract()
.postCss("resources/css/app.css", "public/css", [require("tailwindcss")])
.version();
您可以看到我们指明了我们正在使用的 Vue 版本，我们还为我们的根 JavaScript 路径设置了一个别名（@），同时我们还使用了 .extract() 将代码分割成更小的块（可选，但对于某些生产环境使用情况更好）。
设置我们的 Laravel 路由
我们已经处理了几乎所有的事情。现在，我们只需要创建每个我们创建的 Vue 页面的路由。
让我们打开 routes/web.php 文件，并将其中的所有内容替换为以下内容
<?php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
Route::get(
'/',
function () {
return Inertia::render(
'Home',
[
'title' => 'Homepage',
]
);
}
)->name( 'homepage' );
Route::get(
'/about',
function () {
return Inertia::render(
'About',
[
'title' => 'About',
]
);
}
)->name( 'about' );
Route::get(
'/contact',
function () {
return Inertia::render(
'Contact',
[
'title' => 'Contact',
]
);
}
)->name( 'contact' );
您可以立即注意到，我们没有返回传统的刀片视图。相反，我们返回一个带有 2 个参数的 Inertia::render() 响应。第一个参数是我们 Vue 页面的名称，第二个是使用 $page.props 传递给 Vue 页面的属性数组。
修改 Vue 页面
了解这一点后，我们可以将我们的页面修改为以下模板，并为它们添加导航
<template>
<Head>
<title>{{ $page.props.title }} - My awesome app</title>
</Head>
<div class="p-6">
<div class="flex space-x-4 mb-4">
<Link
:href="route('homepage')"
class="text-gray-700 bg-gray-200 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>Homepage</Link
>
<Link
:href="route('about')"
class="text-gray-700 bg-gray-200 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>About</Link
>
<Link
:href="route('contact')"
class="text-gray-700 bg-gray-200 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>Contact</Link
>
</div>
<h1>This is: {{ $page.props.title }}</h1>
</div>
</template>
现在，我们在每个页面上都有一个简单的导航，还有一个动态的页面 <title>。现在唯一剩下的事情是编译一切并启动服务器
npm run dev
php artisan serve
最后一个命令将在您的本地主机上使用 8000 端口启动服务器 http://127.0.0.1:8000/，您可以通过导航到它来查看最终结果。
测试
它应该看起来像这样: 
这基本上就是您需要知道的所有信息。当然，还有更多，比如使用 Laravel 的 lang 文件、Vue 布局、服务器端渲染...但这可能是在第二部分。
祝您愉快！
支持并关注我
driesvints, geowrgetudor, raziul, nadu, simomrh 赞同了此文章
Laravel 
Laravel News 
Laracasts 
Laravel Podcast