★ FEATURED ARTICLE Art Design Pro15 分钟跑通并部署的 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 的后台管理系统模板内置登录权限、菜单页签、表格图表组件。跟着敲15 分钟后你改出自己的第一个业务页面并部署上线。2 个版本号达标3 条命令拿到能跑的登录页先说结论Node 和 pnpm 版本达标clone 装依赖就能跑。依赖版本要求Node.js 20.19.0pnpm 8.8.0两个版本号写在package.json的engines字段里先用命令核对node -v pnpm -v达标后跑这三步git clone https://gitcode.com/GitHub_Trending/ar/art-design-procd art-design-pro pnpm installpnpm 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.development4 步写出你的第一个业务页面先说结论列表页 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 } })新增一个完整页面按这条链路走在src/views/下新建你的业务目录和页面组件在src/router/modules/建同名路由文件component指向 views 下的页面meta写标题与图标把新路由加进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 servepnpm 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_URLpnpm 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
