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-proArt Design Pro 是一套基于 Vue3 Element Plus Vite TypeScript 的现成 Vue3 后台管理系统模板。这是一篇后台管理系统快速入门与安装教程按「克隆 → 跑通 → 看懂结构 → 部署」走一遍约 15 分钟即可把这个后台模板改成你自己的业务。先查环境安装前的 2 个版本要求先说结论环境只差两个版本号满足再动手。要求写在package.json的engines字段里依赖版本要求检查命令Node.js 20.19.0node -vpnpm 8.8.0pnpm -v如果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每步跑完用下面的现象确认是否成功clone 完成目录下能看到src/、.env、package.json。install 完成生成node_modules/目录终端以Done in ...结束。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 value8234 label销售总额 percentage12.5 :chart-data[12, 45, 60, 30] /从演示到生产3 条命令清完打包一条链路按顺序执行每条命令干一件事pnpm clean:dev—— 删除演示页面、封面图、地图组件及其路由只保留工作台、系统管理、结果页、异常页 4 个核心模块。终端会打印清理清单并要求输入yes确认删除不可恢复执行前先看一遍列表。pnpm build—— 先做vue-tsc类型检查再打包产物输出到dist/生产构建默认去除console。pnpm serve—— 本地预览dist/产物确认资源路径、样式都正常后再交给运维部署。另外两处部署时要改的环境变量.env.production的VITE_API_URL指向你的正式后端如果部署在子目录如/admin把VITE_BASE_URL设为/admin/。5 个常见坑的避坑速查表问题常见原因解法端口 3006 被占用其他进程占用了默认端口修改.env中的VITE_PORT登录后页面空白、菜单为空模板默认请求内置 mock 服务网络不通把VITE_API_PROXY_URL换成你的后端地址部署到子目录后 404未配置基础路径.env.production中VITE_BASE_URL设为/admin/带斜杠接口请求跨域失败开发代理未指向自己的后端修改.env.development的VITE_API_PROXY_URLpnpm build报 vue-tsc 类型错误Node / pnpm 低于要求版本升级到 Node 20.19 与 pnpm 8.8 后重装依赖清理完演示数据就可以开始写自己的业务页面了更完整的特性清单参考 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考