Laravel SPA：构建单页应用程序的完整指南

**目录**

介绍

设置 Laravel 后端安装 Laravel 配置 Sanctum 进行身份验证

设置 Vue.js 前端安装 Vue.js 配置 Vite

集成 Vue Router 创建路由构建示例组件

Laravel API 开发定义路由创建控制器

在 Vue.js 中使用 Axios 获取数据在 Vue 组件中设置 Axios API 请求

运行并测试 SPA

奖励：使用 Sanctum 添加身份验证

结论

介绍

本指南介绍如何使用 Laravel 和 Vue.js 构建单页应用程序 (SPA)。它介绍了后端设置、使用 Sanctum 创建 API、使用 Vue.js 进行前端集成、使用 Vue Router 进行路由以及使用 Axios 进行数据处理。按照本指南，您可以创建一个具有动态前端和强大 Laravel 后端的无缝现代 Web 应用程序。

第 1 部分：设置 Laravel 后端

步骤 1：安装 Laravel

通过 Composer 安装一个新的 Laravel 项目：

composer create-project --prefer-dist laravel/laravel spa-demo

导航到项目目录：

cd spa-demo

启动开发服务器：

php artisan serve

步骤 2：安装 Sanctum 进行 API 身份验证

Laravel Sanctum 是 SPA 身份验证的理想选择。

composer require laravel/sanctum

发布 Sanctum 配置：

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

更新 `app/Http/Kernel.php`：

protected $middlewareGroups = [
    'web' => [
        ...
        \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    ],
    ...
];

第 6 部分：构建 SPA

步骤 1：运行前端

使用 Vite 编译资产：

npm run dev

第 2 步：打开 SPA

导航到“http://localhost:8000”并与应用程序交互。

奖励：Sanctum 身份验证

要添加身份验证：

使用 API 令牌设置 Sanctum。

创建登录和注册路线。

使用 Axios 发送请求并处理令牌存储。

结论

按照本指南，您已利用 Vue.js、Vue Router 和 Sanctum 构建了功能强大的 Laravel SPA。此应用程序架构可确保可扩展性、顺畅的用户交互和现代 Web 标准。继续探索高级功能，例如使用 Vuex 进行状态管理、服务器端渲染或 API 优化，以进一步提高您的 SPA 开发技能。

CLIS.CC