Art Design Pro 快速上手指南：5分钟跑通 Vue3 后台管理系统

Art Design Pro 快速上手指南：5分钟跑通 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 的现成 Vue3 后台管理系统模板。这是一篇后台管理系统快速入门与安装教程：按「克隆 → 跑通 → 看懂结构 → 部署」走一遍，约 15 分钟即可把这个后台模板改成你自己的业务。

先查环境：安装前的 2 个版本要求

先说结论：环境只差两个版本号，满足再动手。要求写在package.json的engines字段里：

如果pnpm install因生命周期脚本被安全策略拦截而报错，先执行pnpm install --ignore-scripts把项目跑起来，事后再单独排查脚本问题。

用 3 条命令跑起来，然后打开 3006 端口

开发服务器端口是 3006（由.env里的VITE_PORT决定），pnpm dev会自动拉起浏览器。

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

每步跑完，用下面的现象确认是否成功：

1. clone 完成：目录下能看到src/、.env、package.json。
2. install 完成：生成node_modules/目录，终端以Done in ...结束。
3. dev 完成：浏览器自动打开，地址栏是http://localhost:3006，看到登录页（账号输入 + 密码输入 + 登录按钮）即可，请求走的是内置 mock 服务。

跑通后先回答 3 个问题：改页面、换主题、对接接口各进哪个目录

不用背完整目录，记住「要做的事 → 进哪个目录」这组映射就够了：

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

• 改页面：进 src/views/ 对应子目录，页面路由在src/router/modules/的同名文件里维护。
• 换主题：运行时入口是src/hooks/core/useTheme.ts，静态默认值在src/config/。
• 对接接口：请求函数加在src/api/，把.env.development里的VITE_API_PROXY_URL指向你的后端地址。

演示页面自带一套封面资源放在src/assets/images/cover/下，后面清理时会一并移除。

高频场景 3 选 3：写表格、切主题、画图表

① 表格：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 } })

② 主题切换：支持亮色、暗色、跟随系统三种模式，切换即时生效。

import { useTheme } from '@/hooks/core/useTheme' import { SystemThemeEnum } from '@/enums/appEnum' const { switchThemeStyles } = useTheme() switchThemeStyles(SystemThemeEnum.DARK)

③ 图表：src/components/core/charts/内置 9 个 ECharts 组件（折线、柱状、雷达、地图等），构建时自动注册，模板里直接写标签即可：

<ArtLineChartCard value="8234" label="销售总额" percentage="12.5" :chart-data="[12, 45, 60, 30]" />

从演示到生产：3 条命令清完打包一条链路

按顺序执行，每条命令干一件事：

1. pnpm clean:dev—— 删除演示页面、封面图、地图组件及其路由，只保留工作台、系统管理、结果页、异常页 4 个核心模块。终端会打印清理清单并要求输入yes确认，删除不可恢复，执行前先看一遍列表。
2. pnpm build—— 先做vue-tsc类型检查再打包，产物输出到dist/，生产构建默认去除console。
3. pnpm serve—— 本地预览dist/产物，确认资源路径、样式都正常后再交给运维部署。

另外两处部署时要改的环境变量：.env.production的VITE_API_URL指向你的正式后端；如果部署在子目录（如/admin），把VITE_BASE_URL设为/admin/。

5 个常见坑的避坑速查表

清理完演示数据，就可以开始写自己的业务页面了；更完整的特性清单参考 README.zh-CN.md，表格缓存、刷新策略等细节直接读 useTable 源码 最省事。🚀

【免费下载链接】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