Inertia.js 开源项目教程
项目介绍
Inertia.js 是一个用于构建现代单页应用（SPA）的库，它允许开发者使用服务端框架（如 Laravel、Rails 等）来处理路由和控制器逻辑，同时在前端使用 Vue.js、React 等框架来渲染页面。Inertia.js 通过简单的 API 连接前后端，使得开发全栈应用变得更加高效和便捷。
项目快速启动
安装 Inertia.js
首先，确保你已经安装了 Node.js 和 Composer。然后，在你的 Laravel 项目中安装 Inertia.js 及其相关依赖：
composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/inertia-vue3
配置服务端
在 resources/views 目录下创建一个 app.blade.php 文件，作为 Inertia.js 的布局文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inertia.js App</title>
@vite('resources/js/app.js')
</head>
<body>
<div id="app"></div>
</body>
</html>
在 app/Providers/AppServiceProvider.php 中注册 Inertia.js 中间件：
use Inertia\Middleware;
use Illuminate\Support\Facades\Route;
public function boot()
{
$this->app->singleton(Middleware::class, function ($app) {
return new Middleware($app['request']);
});
Route::middleware('web')
->group(function () {
$this->loadRoutesFrom(__DIR__.'/../routes/web.php');
});
}
配置客户端
在 resources/js 目录下创建一个 app.js 文件，初始化 Inertia.js：
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
});
创建页面
在 resources/js/Pages 目录下创建一个 Welcome.vue 文件：
<template>
<div>
<h1>Welcome to Inertia.js</h1>
</div>
</template>
<script>
export default {
name: 'Welcome',
}
</script>
启动应用
运行以下命令启动开发服务器：
npm run dev
php artisan serve
访问 http://localhost:8000，你应该能看到 "Welcome to Inertia.js" 的页面。
应用案例和最佳实践
Ping CRM
Ping CRM 是一个演示应用，展示了如何使用 Laravel 和 Vue.js 构建一个完整的 Inertia.js 应用。它包含了用户认证、CRUD 操作等功能，是学习 Inertia.js 的最佳实践之一。
Laravel Jetstream
Laravel Jetstream 是一个官方的应用脚手架，集成了 Tailwind CSS、Inertia.js 和 Vue.js，提供了完整的用户认证和团队管理功能，适合快速启动新项目。
典型生态项目
Laravel Breeze
Laravel Breeze 是 Laravel 的官方认证脚手架，使用 Tailwind CSS 和 Inertia.js，提供了简单的用户认证功能，适合小型项目。
Laravel Jetstream React
Laravel Jetstream React 是一个基于 Laravel Jetstream 的变体，使用 React 代替 Vue.js，适合喜欢 React 的开发者。
通过以上教程，你可以快速上手 Inertia.js，并了解其典型应用和生态项目。希望你能通过 Inertia.js 构建出高效、现代的单页应用
扫一扫
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
