82 lines
3.3 KiB
Markdown
82 lines
3.3 KiB
Markdown
# 截图生成模板（Vue 3 + TypeScript + Vite）
|
||
|
||
一个基于 Vue 3 的前端项目，用于生成截图模板，支持登录、注册、验证码、图片上传与效果预览等功能。项目集成了 Pinia、Vue Router、Element Plus、TailwindCSS 等，开发体验友好、构建快速。
|
||
|
||
## 技术栈
|
||
- Vue 3、TypeScript、Vite
|
||
- Pinia、Vue Router
|
||
- Element Plus、TailwindCSS
|
||
- Axios
|
||
|
||
## 快速开始
|
||
1. 安装依赖
|
||
- `npm install`
|
||
2. 选择并启动应用（需要传入 appname）
|
||
- 开发：`npm run dev -- dy`
|
||
- 构建：`npm run build -- dy`
|
||
- 预览：`npm run preview`
|
||
|
||
> 说明：`dy` 是示例 appname，必须与 `config/index.json` 中的键一致。开发时写入 `.env.development` 并启动 Vite（默认端口 `3001`），构建时写入 `.env.production` 并输出到 `html/`。
|
||
|
||
## 环境与配置
|
||
- `config/index.json` 管理多应用配置，示例：
|
||
```json
|
||
{
|
||
"dy": {
|
||
"appName": "dy",
|
||
"accountList": [16888888887, 16888888888, 16888888889]
|
||
}
|
||
}
|
||
```
|
||
- 启动/构建脚本会将所选应用写入 `.env.*`：
|
||
- `VITE_APP_NAME`
|
||
- `VITE_APP_CONFIG`（JSON 字符串）
|
||
- 前端通过 `src/config/index.ts` 读取并解析：
|
||
- `appName` 与 `appConfig`
|
||
- `imgHost` 将回退到 `appUrl`（若存在）
|
||
|
||
## 开发与构建
|
||
- 开发服务：`npm run dev -- dy`
|
||
- 写入 `.env.development`
|
||
- 启动命令：`vite --port 3001 --host`
|
||
- 访问 `http://localhost:3001/`
|
||
- 构建产物：`npm run build -- dy`
|
||
- 输出目录：`html/`
|
||
- 预览构建结果：`npm run preview`
|
||
- 默认端口见 `vite.config.ts`（示例：`8000`）
|
||
|
||
## 接口与代理
|
||
- 统一通过 `/api` 访问后端接口（见 `vite.config.ts` 中 `server.proxy`）。
|
||
- 示例：`/api/login`、`/api/register`、`/api/captcha/new`、`/api/upload` 等
|
||
- 默认代理目标示例：`http://192.168.1.168:8090`（请按需修改）
|
||
- 响应拦截：
|
||
- 登录态失效（`code === 401`）自动跳转 `'/login'`
|
||
- 业务错误通过 `ElMessage` 提示
|
||
- `blob` 响应（验证码图片）直接返回原始数据，避免按业务码处理
|
||
|
||
## 主要功能模块
|
||
- 登录、注册与验证码
|
||
- 登录提交：账号、密码、验证码
|
||
- 注册提交：账号、密码、确认密码、验证码
|
||
- 验证码接口：`GET /api/captcha/new`，前端 `blob` 展示并支持刷新
|
||
- 截图生成与图片上传
|
||
- 图片上传走 `/api/upload`，上传成功后更新预览数据
|
||
- 头像、评论图片等均可在页面操作与替换
|
||
|
||
## 关键文件
|
||
- `src/views/common/login/index.vue`：登录/注册页，集成验证码展示与刷新逻辑
|
||
- `src/store/user.ts`：用户状态与登录提交逻辑（含验证码校验）
|
||
- `src/api/login.ts`：登录、注册、验证码 API 封装
|
||
- `src/request/index.ts`：Axios 实例与拦截器（401 处理、blob 直返）
|
||
- `vite.config.ts`：Vite 插件、构建与开发代理配置
|
||
- `bin/index.js`：根据 `appname` 写入 `.env.*` 并调用 Vite（开发/构建）
|
||
|
||
## 常见问题
|
||
- 开发脚本必须携带 `appname`：`npm run dev -- dy`
|
||
- 后端地址变化需修改 `vite.config.ts` 中代理目标
|
||
- 验证码刷新：前端会带时间戳参数避免缓存
|
||
- 401 未授权：自动清理登录态并跳转登录页
|
||
|
||
## 许可
|
||
本项目供内部或学习交流使用，若需开源协议请自行补充。
|