//环境准备与依赖安装

1.前端依赖安装

 （1）执行命令

npm install vue@^3.5 vue-router@^4.5
npm install element-plus
npm install @element-plus/icons-vue
npm install pinia
npm install axios
npm install vue-draggable-next
npm install -D @vitejs/plugin-vue

（2）依赖说明

| 依赖 | 作用 |
|------|------|
| `vue@^3.5` | Vue 3 核心框架 |
| `vue-router@^4.5` | Vue 官方路由，实现 SPA 页面切换 |
| `element-plus` | Element Plus UI 组件库 |
| `@element-plus/icons-vue` | Element Plus 官方图标库 |
| `pinia` | Vue 3 官方状态管理 |
| `axios` | HTTP 客户端，用于调用后端 API |
| `vue-draggable-next` | 拖拽库，用于可视化编辑器 |
| `@vitejs/plugin-vue` | Vite 官方 Vue 3 插件 |

2.后端依赖安装

（1）执行命令

composer require laravel/sanctum
php artisan vendor:publish --tag=sanctum-migrations
php artisan migrate --force

（2）命令说明

| 命令 | 作用 |
|------|------|
| `composer require laravel/sanctum` | 安装 Laravel Sanctum 认证包 |
| `php artisan vendor:publish --tag=sanctum-migrations` | 发布 Sanctum 数据库迁移文件 |
| `php artisan migrate --force` | 执行迁移，生成 `personal_access_tokens` 表 |

（3）设计原因

- Sanctum 是 Laravel 官方 API 认证方案，轻量且安全
- 用户登录成功后生成 Token，后续请求携带 Token 验证身份

3.配置 Vite

（1）文件路径

`D:\laragon\www\engine-api\vite.config.js`

（2）完整代码

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/admin/main.js',
            ],
            refresh: true,
        }),
        vue(),
    ],
});
```

（3）配置说明

| 配置项 | 作用 |
|--------|------|
| `laravel()` 插件 | 让 Vite 与 Laravel 集成，自动处理资源版本 |
| `input` 数组 | 定义三个入口文件 |
| `vue()` 插件 | 让 Vite 支持 `.vue` 单文件组件 |
| `refresh: true` | 文件变化时自动刷新浏览器 |

（4）设计原因

- 后台使用独立入口 `resources/js/admin/main.js`，与前台分离
- 该文件将在阶段2创建，阶段1编译报错是预期的