70 lines
2.4 KiB
Markdown
70 lines
2.4 KiB
Markdown
|
# 爱视（aishi）管理后台前端
|
|||
|
|
|
|||
|
|
基于 **Vue 3**、**Vite**、**Element Plus** 的后台管理界面，与后端通过 **HTTP API** 对接。开发环境下请求统一走 Vite 代理，避免浏览器跨域问题。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
| 类别 | 技术 |
|
|||
|
|
|------|------|
|
|||
|
|
| 框架 | Vue 3（Composition API、`script setup`） |
|
|||
|
|
| 构建 | Vite 8、TypeScript、`vue-tsc` |
|
|||
|
|
| UI | Element Plus、SCSS、UnoCSS |
|
|||
|
|
| 路由与状态 | Vue Router 5、Pinia |
|
|||
|
|
| HTTP | Axios、`qs` |
|
|||
|
|
| 其他 | Lodash、xlsx（导入导出）、部分图标与区域数据组件 |
|
|||
|
|
|
|||
|
|
## 环境要求
|
|||
|
|
|
|||
|
|
建议使用 **Node.js** 当前 LTS 版本；包管理统一使用 **[pnpm](https://pnpm.io/)**（安装：`npm install -g pnpm` 或见官网）。
|
|||
|
|
|
|||
|
|
## 快速开始
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 安装依赖
|
|||
|
|
pnpm install
|
|||
|
|
|
|||
|
|
# 本地开发（默认读取 .env.development）
|
|||
|
|
pnpm dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## pnpm 脚本
|
|||
|
|
|
|||
|
|
| 命令 | 说明 |
|
|||
|
|
|------|------|
|
|||
|
|
| `pnpm dev` | 启动开发服务器（Vite） |
|
|||
|
|
| `pnpm build` | 类型检查（`vue-tsc`）后生产构建 |
|
|||
|
|
| `pnpm build:dev` | 以 `development` 模式构建 |
|
|||
|
|
| `pnpm build:test` | 以 `test` 模式构建 |
|
|||
|
|
| `pnpm preview` | 本地预览构建产物 |
|
|||
|
|
| `pnpm typecheck` | 仅执行 TypeScript / 模板类型检查 |
|
|||
|
|
|
|||
|
|
## 环境变量
|
|||
|
|
|
|||
|
|
前缀均为 `VITE_`，在 `vite.config.js` 中通过 `loadEnv` 加载。常见配置：
|
|||
|
|
|
|||
|
|
| 变量 | 说明 |
|
|||
|
|
|------|------|
|
|||
|
|
| `VITE_APP_PROXY_TARGET` | 开发代理目标地址（后端服务 origin），如 `http://127.0.0.1:8083` |
|
|||
|
|
| `VITE_DEV_PORT` | 开发服务器端口，未设置时默认 **3000** |
|
|||
|
|
|
|||
|
|
各环境的示例或覆盖见项目根目录 `.env`、`.env.development`、`.env.production`、`.env.test`。**不要将含密钥的 `.env` 文件提交到版本库。**
|
|||
|
|
|
|||
|
|
### 代理说明
|
|||
|
|
|
|||
|
|
开发模式下，`/api` 会代理到 `VITE_APP_PROXY_TARGET`，并将路径前缀 `/api` 重写为后端的实际前缀（见 `vite.config.js`）。接口客户端里的 `baseApi` 需与此约定一致。
|
|||
|
|
|
|||
|
|
## 目录结构（简要）
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── api/ # 接口封装
|
|||
|
|
├── assets/ # 静态资源
|
|||
|
|
├── components/ # 全局组件
|
|||
|
|
├── layout/ # 布局与框架页
|
|||
|
|
├── router/ # 路由
|
|||
|
|
├── stores/ # Pinia
|
|||
|
|
├── utils/ # 工具函数
|
|||
|
|
└── views/ # 业务页面（按模块划分，如 modules/sys、modules/device）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
路径别名：`@` → `src`，`@assets` → `src/assets`（见 `vite.config.js`）。
|