前端开发入口
本篇是 Forge 前端开发的起点，帮助你建立技术栈认知并选择正确的学习路径。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| Vue 3 | 3.5 | 组合式 API（<script setup>） |
| Naive UI | 2.42 | 组件库 |
| Vite | 7 | 构建工具 + HMR |
| Pinia | 3 | 状态管理 |
| Vue Router | 4.5 | 路由 |
| UnoCSS | 66 | 原子化 CSS |
| Axios | 1.11 | HTTP 客户端 |
| ECharts | 6 | 图表 |
| TypeScript | 5.x | 类型安全 |
开发工具
| 工具 | 说明 |
|---|---|
| VS Code | 推荐编辑器 |
| Volar | Vue 3 官方插件 |
| UnoCSS 插件 | 原子化 CSS 智能提示 |
| ESLint | 代码规范检查 |
推荐学习顺序
- 新增页面与动态路由 — 创建 Vue 页面和路由注册
- 请求封装与错误处理 — API 调用方式
- 加密请求 — 敏感接口加密
- Pinia 状态管理 — 全局状态
- 菜单与按钮权限 — 权限控制
- DictSelect、DictTag 与 useDict — 字典组件
- 文件上传与 AuthImage — 文件处理
- Naive UI、UnoCSS 与主题 — 样式系统
- 组件测试基础 — 测试编写
快速启动
bash
cd forge-admin-ui
# 安装依赖
pnpm install
# 开发模式（默认 localhost:3000）
pnpm dev
# 生产构建
pnpm build
# Lint 修复
pnpm lint:fix默认登录凭证：admin / 123456
目录结构
forge-admin-ui/src/
├── api/ # API 接口定义
├── components/ # 公共组件
├── composables/ # 组合式函数
├── layouts/ # 布局组件
├── router/ # 路由配置
├── stores/ # Pinia Store
├── utils/ # 工具函数
├── views/ # 页面视图
├── styles/ # 全局样式
└── config/ # 应用配置核心组件
| 组件 | 用途 |
|---|---|
AiCrudPage | 零代码 CRUD 页面 |
AiForm | AI 表单组件 |
AiTable | AI 表格组件 |
DictSelect | 字典下拉选择 |
DictTag | 字典标签渲染 |
FileUpload | 文件上传 |
AuthImage | 鉴权图片 |
useDict() | 字典数据获取 |
关键约定
- 统一请求：
import { request } from '@/utils/http' - 加密请求：
import { postEncrypt } from '@/utils/encrypt-request' - 占位符：
:id（冒号格式），禁止{id} - 分页参数：
pageNum+pageSize - 按钮样式：UnoCSS 语义化颜色类（
text-primary、text-error） - 字典使用：禁止硬编码 options，必须用 DictSelect/DictTag/useDict