Arco Design Pro Vite
基于 Arco Design Pro 的 Vue 3 中后台模板,使用 Vite 8 + Pinia + TypeScript 构建。
环境要求
- Node.js >= 20.19.0
- pnpm
常用命令
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「精简版 / 完整版」的可选模块边界。