Art Design Pro：15 分钟跑通并部署的 Vue3 后台管理系统模板

【免费下载链接】art-design-proA Vue 3 admin dashboard template using Vite + TypeScript + Element Plus | vue3 admin | vue-admin — focused on user experience and visual design.项目地址: https://gitcode.com/GitHub_Trending/ar/art-design-pro

Art Design Pro 是 Vue3 + Element Plus + Vite + TypeScript 的后台管理系统模板，内置登录权限、菜单页签、表格图表组件。跟着敲，15 分钟后你改出自己的第一个业务页面并部署上线。

2 个版本号达标，3 条命令拿到能跑的登录页

先说结论：Node 和 pnpm 版本达标，clone 装依赖就能跑。

两个版本号写在package.json的engines字段里，先用命令核对：

node -v && pnpm -v

达标后跑这三步：

• git clone https://gitcode.com/GitHub_Trending/ar/art-design-pro
• cd art-design-pro && pnpm install
• pnpm dev

验证：

• 目录下能看到src/、.env、package.json
• 生成了node_modules/，终端以Done in ...收尾
• 浏览器自动打开http://localhost:3006，出现账号、密码、登录按钮的登录页

✅ 看到登录页就对了，登录请求走的是内置演示接口，先随便输账号密码体验。❌ 如果pnpm install报生命周期脚本被安全策略拦截，改用pnpm install --ignore-scripts先把项目跑起来，事后再单独排查脚本。

5 个目录 30 秒看懂代码布局

先说结论：记住「要做的事 → 进哪个目录」就够了。

src/ ├── views/ # 页面，一个业务模块一个子目录 ├── api/ # 接口请求，axios 封装 ├── router/ # 路由模块与导航守卫 ├── store/ # Pinia 状态（用户、主题、页签） └── hooks/ # useTable、useTheme 等逻辑复用

三件高频事各对号入座：

• 改页面→src/views/对应子目录，路由在src/router/modules/同名文件里维护
• 换主题→ 运行时入口src/hooks/core/useTheme.ts，静态默认值在src/config/
• 对接接口→ 请求函数加在src/api/，代理地址在.env.development

4 步写出你的第一个业务页面

先说结论：列表页 = useTable 一个 hook + 一个路由文件。

useTable把请求、分页、搜索、表格缓存封装好了，你只传接口函数，源码在 src/hooks/core/useTable.ts。

import { useTable } from '@/hooks/core/useTable' import { fetchGetUserList } from '@/api/system-manage' const { data, loading, pagination, getData } = useTable({ core: { apiFn: fetchGetUserList, immediate: true } })

新增一个完整页面，按这条链路走：

1. 在src/views/下新建你的业务目录和页面组件
2. 在src/router/modules/建同名路由文件：component指向 views 下的页面，meta写标题与图标
3. 把新路由加进src/router/modules/index.ts的routeModules数组

✅ 看到左侧菜单多出你的页面、表格正常分页就对了。图表不用手写配置，src/components/core/charts/下 9 个 ECharts 组件（折线、柱状、雷达、地图）构建时自动注册，模板里直接写标签即可。

改 1 行配置把演示接口换成你的后端

先说结论：代理只有一行，你的请求函数不用动。

开发环境：.env.development里的VITE_API_PROXY_URL现在指向内置演示接口，换成你的后端地址。链路是：页面请求/api/**→ Vite 代理转发到VITE_API_PROXY_URL→ 你的后端，代理同时解决跨域。

生产环境：.env.production的VITE_API_URL直接写完整后端地址，部署前改。

# .env.development VITE_API_PROXY_URL = https://your-backend.com

✅ 改完pnpm dev重启，Network 面板里/api请求返回你的真实数据就对了。❌ 如果登录后菜单空白、页面一片白，多半是演示接口在你的网络下不通，把代理指到自己的后端再试。

1 条命令删干净 6 类演示内容

先说结论：pnpm clean:dev一键清，删前会列清单让你确认。

pnpm clean:dev

删掉的：widgets、template、article、examples、safeguard、help 等演示页面，连同src/router/modules/里对应路由文件、src/assets/images/下的演示图片、地图组件、评论组件、src/mock/里的演示数据。

保留的：dashboard 工作台、system 系统管理、result 结果页、exception 异常页 4 个核心模块，加登录和核心组件库。

执行时终端先打印完整清单，输yes才动手，删除不可恢复，建议先看完列表。❌ 如果删完某个菜单还在，看src/router/modules/index.ts里的routeModules数组，菜单由路由生成，路由在菜单就在。

跑通 build → serve 的 2 条命令，拿到能上线的 dist

先说结论：build 自带类型检查，serve 先本地验收再交运维。

pnpm build pnpm serve

pnpm build先跑vue-tsc全量类型检查再打包，产物在dist/，生产构建默认去除console与debugger。pnpm serve本地预览 dist，重点看资源路径、样式、登录链路是否正常。

部署到子目录（如 /admin）：.env.production的VITE_BASE_URL设为/admin/，末尾斜杠别漏，否则 Vite 打包出的资源路径全错，刷新页面就 404。

5 个坑，1 张表对号入座

先说结论：跑不通时 80% 是这 5 个原因。

• pnpm install 被安全策略拦截
  • 先pnpm install --ignore-scripts装完跑起来，再单独排查脚本
• 3006 端口被占用
  • 改.env里的VITE_PORT，或杀掉占用进程
• 登录后菜单空白、页面空白
  • 演示接口不通，改.env.development的VITE_API_PROXY_URL
• pnpm build 报 vue-tsc 类型错误
  • Node 升到 20.19+、pnpm 升到 8.8+，重装依赖
• 接口跨域失败
  • 确认请求前缀是/api，代理才会转发（见 vite.config.ts 的server.proxy）

到这里，演示清掉了、第一个业务页写出来了、dist 也验收过了。下一步去读 src/hooks/core/useTable.ts 看表格缓存与刷新策略怎么写的，特性清单在 README.zh-CN.md 🚀

【免费下载链接】art-design-proA Vue 3 admin dashboard template using Vite + TypeScript + Element Plus | vue3 admin | vue-admin — focused on user experience and visual design.项目地址: https://gitcode.com/GitHub_Trending/ar/art-design-pro