> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.
# 前端
> 帮助你判断 Laravel 13 中 Blade、Livewire、Inertia、React、Vue、Svelte、SPA、Vite 该如何组合的入门指南。
## 概览
Laravel 是一款后端框架，但也非常重视包括前端在内的整体开发体验。
在 Laravel 13 中，既可以使用以 PHP 为中心的方式，也可以借助 React、Vue、Svelte 等 JavaScript 框架来构建前端。
选择哪种方案，可以从下面 3 点考虑：
* 主要用 **PHP** 编写 UI
* 主要用 **JavaScript / TypeScript** 编写 UI
* 单一仓库完成，还是把 API 与 SPA 分离
```mermaid theme={null}
flowchart TD
A["Laravel 应用"] --> B{"在哪里组装 UI？"}
A --> G["使用 Vite 构建静态资源"]
B --> C["Blade"]
B --> D["Livewire + Alpine.js"]
B --> E["Inertia + React / Vue / Svelte"]
B --> F["API + 独立 SPA"]
C --> C1["服务器返回 HTML"]
D --> D1["以 PHP 主导构建动态 UI"]
E --> E1["在单仓库中打造类 SPA 体验"]
F --> F1["与其他前端或移动应用协作"]
G --> C1
G --> D1
G --> E1
G --> F1
```
## 以 PHP 为主
### Blade
[Blade](/zh/blade) 是 Laravel 标准的模板引擎。从控制器或路由返回视图，将服务器生成的 HTML 交给浏览器。
**优点**
* 与 Laravel 的路由、校验、认证等自然整合
* 只用 PHP 就能完成，学习成本低
* 与关注 SEO 或首屏渲染的页面契合度高
**缺点**
* 每次跳转或表单提交都容易造成整页刷新
* 复杂交互仍需 JavaScript 辅助
Blade 适用于后台管理、内部工具、以内容为中心的页面、以表单为主的应用。
### Livewire
[Laravel Livewire](https://livewire.laravel.com) 在 Blade 之上提供了一种以 PHP 为主构建动态 UI 的方式。可以像 React 或 Vue 那样构建 modal、搜索、行内编辑等交互。
**优点**
* 可以在 PHP + Blade 的基础上构建动态 UI
* 与 Laravel 的状态管理和校验联动良好
* 想在特定位置引入 JavaScript 时，与 Alpine.js 组合得非常自然
**缺点**
* 复杂的客户端状态管理不如 JS 框架擅长
* 大型 SPA 前端职责较重时不一定合适
想深入了解 Livewire，可参阅 [Livewire 入门](/zh/blog/livewire-introduction)。
### 面向 PHP 的启动套件
Laravel 13 的[启动套件](/zh/starter-kits)提供了面向想以 PHP 为主构建**动态 UI** 团队的 **Livewire** 版本。仅用 Blade 也是可行的，但 PHP 优先的启动套件本身选用了 Livewire，并预置了认证、布局与 Vite 配置，能最快投入开发。
## 使用 JavaScript 框架
### Inertia + React / Vue / Svelte
[Inertia](https://inertiajs.com) 是让你在保留 Laravel 路由、控制器与认证的同时，使用 React、Vue、Svelte 编写页面组件的桥梁。它不将 API 服务器与 SPA 完全分离，而是在同一个 Laravel 应用内实现现代化 UI。
**优点**
* 可以使用 React / Vue / Svelte 的组件模型
* 路由与认证仍在 Laravel 一侧
* 便于将后端与前端置于同一仓库中管理
**缺点**
* 比纯 Blade 需要学习更多东西
* 通常需要熟悉 Node.js 工具链与 TypeScript
Laravel 13 的官方启动套件里，**React / Vue / Svelte + Inertia** 都是开箱可选的。
详细内容可参阅 [Inertia 入门](/zh/blog/inertia-introduction)、[React 入门](/zh/blog/react-introduction)、[Vue 入门](/zh/blog/vue-introduction)、[Svelte 入门](/zh/blog/svelte-introduction)。
### API 与独立 SPA 分离
也可以让前端完全独立于 Laravel，由另一 SPA 或移动应用调用 API。适合多个客户端共享同一后端的场景。
此时 Laravel 主要承担：
* 提供 API 路由
* 认证与授权（如 [Sanctum](/zh/sanctum)）
* JSON 响应整型（如 [Eloquent API Resources](/zh/eloquent-resources)）
**优点**
* 便于将同一后端服务用于 Web、移动、桌面等多类客户端
* 前端技术选型可以完全独立于 Laravel
**缺点**
* 认证、数据获取、部署都要分别设计
* 相较于单一 Laravel 应用会更复杂
### 面向 JavaScript 的启动套件
使用[启动套件](/zh/starter-kits)时，Inertia、React / Vue / Svelte、Tailwind CSS、Vite 都已预装。认证页面也已备齐，可以直接聚焦于 UI 开发。
## 使用 Vite 构建资源
无论选择哪种方案，Laravel 13 通常都使用 [Vite](/zh/vite) 构建 CSS 与 JavaScript。Blade 和 Livewire 用它处理轻量脚本与样式；Inertia 则借助它构建整个前端。
Vite 的优势：
* 本地开发时快速的 HMR
* 生产资源的打包与版本化
* 与 Laravel `@vite()` 指令的原生集成
Laravel 13 启动套件已经预配置了基于 Vite 的前端结构。
## 方案对比
| 方案 | 适用场景 | 优点 | 缺点 |
| ------------------------------ | --------------------------- | ----------------------- | -------------------------------- |
| Blade | 以内容为主的页面、以表单为主的管理后台 | 简单易学，与 Laravel 内置能力自然整合 | 高级 UI 中整页刷新较多 |
| Livewire | 以 PHP 为主构建动态 UI 的业务应用 | 用 PHP 就能构建响应良好的 UI | 复杂的客户端状态管理稍显不足 |
| Inertia + React / Vue / Svelte | 想兼顾现代化 UI 与 Laravel 一体运维的应用 | 单仓库即可打造类 SPA 体验 | 需要一定 JavaScript / TypeScript 熟练度 |
| API + 独立 SPA | 需要多客户端或移动集成的产品 | 前端可独立部署 | 认证、部署与运维更复杂 |
## 下一步
了解服务端渲染的基础。
比较 React、Vue、Svelte、Livewire 的初始配置。
了解开发服务器、HMR 与生产构建流程。
了解如何通过 Inertia 将 Laravel 与 JavaScript 框架连接起来。
## Related topics
- [如何创建 Laravel Starter Kit](/zh/advanced/starter-kit-creation.md)
- [开始学习 Laravel 前需要具备的知识](/zh/true-tutorial.md)
- [使用 Inertia.js 构建 SPA](/zh/blog/inertia-introduction.md)
- [流式输出](/zh/packages/laravel-copilot-sdk/streaming.md)
- [使用 Vite 打包资源](/zh/vite.md)