Files
2026-06-21 17:50:24 +08:00
..
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00
2026-06-21 17:50:24 +08:00

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.tslocale/en-US.ts
  • 页面文案:views/**/locale/components/**/locale/,通过 import.meta.glob 自动聚合

模板标记

路由与部分功能块带有 /** simple *//** simple end */ 注释,表示 Arco Pro「精简版 / 完整版」的可选模块边界。