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「精简版 / 完整版」的可选模块边界。
|