69 lines
2.2 KiB
Markdown
69 lines
2.2 KiB
Markdown
# Arco Design Pro Vite
|
||
|
||
基于 [Arco Design Pro](https://arco.design/pro/) 的 Vue 3 中后台模板，使用 Vite 8 + Pinia + TypeScript 构建。
|
||
|
||
## 环境要求
|
||
|
||
- Node.js >= 20.19.0
|
||
- pnpm
|
||
|
||
## 常用命令
|
||
|
||
```bash
|
||
pnpm install # 安装依赖
|
||
pnpm dev # 开发服务器
|
||
pnpm build # 生产构建
|
||
pnpm report # 构建并生成 bundle 分析报告
|
||
pnpm type:check # TypeScript 检查
|
||
pnpm lint # Biome 代码检查
|
||
pnpm lint:fix # 自动修复
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
src/
|
||
├── api/ # 接口定义（按业务域）
|
||
├── assets/ # 静态资源与全局样式
|
||
├── components/ # 全局 / 布局级组件
|
||
├── directive/ # 自定义指令
|
||
├── hooks/ # 组合式函数
|
||
├── layout/ # 页面布局
|
||
├── locale/ # i18n 入口与全局文案
|
||
├── mocks/ # Mock 数据（开发环境）
|
||
│ ├── handlers/ # 全局 mock 处理器
|
||
│ └── setup.ts # mock 启用与响应包装
|
||
├── plugins/ # 应用插件（如 HTTP 拦截器）
|
||
├── router/ # 路由与守卫
|
||
├── store/ # Pinia 状态
|
||
├── types/ # 全局类型
|
||
├── utils/ # 工具函数
|
||
└── views/ # 页面（每页可含 components/、locale/、mock.ts）
|
||
config/
|
||
└── vite.config.ts # Vite 配置
|
||
public/ # 静态公共资源
|
||
```
|
||
|
||
## Mock 说明
|
||
|
||
仅在开发环境（`import.meta.env.DEV`）下，`main.ts` 会动态加载 `src/mocks/index.ts`；生产构建不会打入 mockjs。
|
||
|
||
- 全局 handler 位于 `mocks/handlers/`
|
||
- 页面级 mock 保留在 `views/**/mock.ts`，由 `import.meta.glob` 自动注册
|
||
|
||
## 环境变量
|
||
|
||
| 变量 | 说明 |
|
||
|------|------|
|
||
| `VITE_API_BASE_URL` | 后端 API 地址（见 `.env.development`） |
|
||
| `VITE_ERROR_REPORT_URL` | 可选，配置后启用前端错误上报（`utils/error-report.ts`） |
|
||
|
||
## i18n 说明
|
||
|
||
- 菜单等全局文案：`locale/zh-CN.ts`、`locale/en-US.ts`
|
||
- 页面文案：`views/**/locale/` 与 `components/**/locale/`，通过 `import.meta.glob` 自动聚合
|
||
|
||
## 模板标记
|
||
|
||
路由与部分功能块带有 `/** simple */` … `/** simple end */` 注释，表示 Arco Pro「精简版 / 完整版」的可选模块边界。
|