点击下方【IT学习日记】 “关注“、选择 “设为标星“
每天三分钟、打卡阅读
最快获取全网学习干货、行业资讯
简介
Art-Design-Pro是一款MIT协议、开源免费的Vue3中后台前端管理模板系统，可帮助前端开发者替换vue-element-admin、vue-vben-admin等老旧或重型Admin方案。
系统集主题切换、动态路由、菜单鉴权、按钮鉴权、多标签页、全局搜索、锁屏、多语言、富文本、Echarts图表、useTable、ArtForm等能力于一体，支持浅色、暗黑双主题效果，可帮助用户快速完成各种高颜值的后台业务系统开发。
模板以”设计美学和高效开发兼顾”为核心理念，采用Vue3组合式API + TypeScript + Vite架构，基于Element Plus与Tailwind CSS构建，界面美观大气、交互流畅。十分适合快速搭建企业后台管理系统、SaaS平台、数据看板、内部管理系统等场景使用。
功能列表
现代化UI设计：
基于 ElementPlus 设计规范进行视觉优化，界面简洁美观、操作流畅。
支持浅色 + 暗黑双主题模式，并可自定义主题配色，满足不同用户使用需求。
提供流畅的交互动画：按钮点击、主题切换、页面过渡、图表动画等体验可媲美商业产品。
丰富组件：
数据展示组件：表格、列表、卡片等多种数据呈现方式，适配不同业务系统使用。
表单处理组件：封装好了通用的表单组件，支持验证、提交等完整流程，可开箱即用。
图标库：内置丰富图标，可满足各类界面设计需求。
富文本编辑器：支持内容编辑和格式化，无需额外集成第三方库。
ECharts图表：内置各类精美图表库，可快速实现数据可视化功能。
开发工具：
支持useTable API：封装了常见表格逻辑，方便用户快速实现数据表格的渲染、分页、搜索等功能。
支持ArtForm API：封装了表单处理逻辑，可有效简化表单创建、验证、提交等流程。
支持组件灵活可扩展，满足不同业务场景需求。
后台管理：
支持丰富主题切换：包含多主题模式，也可自定义配色。
支持全局搜索：可用于快速定位菜单和内容检索，提升用户体验。
支持锁屏：提供锁屏保护，保障数据安全，无需重复开发。
支持多标签页：可实现多任务并行操作。
支持全局面包屑：提供清晰的页面导航，满足大部分用户使用习惯。
支持多语言国际化（i18n）：可随意进行多语言切换。
支持路由级别鉴权 & 侧边栏菜单鉴权：提供完善的权限管理体系，全方位保障用户数据安全。
支持移动端适配：一套代码可实现不同屏幕尺寸的响应式布局。
项目管理：
支持主流代码规范：Eslint、Prettier、Stylelint，Git Hooks：Husky、Lint-staged 确保代码质量。
内置提交规范：采用cz-git 规范化提交信息，确保项目版本追溯清晰。
内置一键清理脚本：可快速移除演示数据，得到直接可用的干净项目。
功能截图
工作台：
分析页：
模板中心：
图表：
组件中心：
文本编辑器：
高级表格：
角色管理：
文章管理：
服务器管理：
系统架构
项目结构：
├── public/ # 静态资源
├── scripts/
│ └── clean-dev.ts # 一键清理演示数据脚本
├── src/
│ ├── components/ # 业务组件（表格/表单/富文本/图表等）
│ ├── hooks/ # 组合式API（useTable等）
│ ├── router/ # 路由配置与权限守卫
│ │ └── asyncRoutes.ts # 前端模式异步路由
│ ├── stores/ # Pinia状态管理
│ ├── types/ # TypeScript类型定义
│ │ └── common/
│ │ └── response.ts # 基础响应类型
│ ├── utils/ # 工具函数
│ │ └── table/
│ │ └── tableConfig.ts # 表格字段映射配置
│ ├── views/ # 页面视图
│ ├── locales/ # 多语言语言包
│ └── assets/ # 样式与图片资源
├── .env # 环境变量（权限模式等）
├── vite.config.ts # Vite构建配置
├── tsconfig.json # TypeScript配置
└── package.json # 依赖与脚本
技术栈：
前端：
核心框架: Vue 3.5、TypeScript 5.6
构建工具: Vite 7
UI组件库: Element Plus 2.11
样式方案: Tailwind CSS 4、Sass
路由: Vue Router 4
状态管理: Pinia 3、pinia-plugin-persistedstate
国际化: vue-i18n 9
网络请求: Axios
图表: Echarts 6
富文本: WangEditor 5
视频播放: xgplayer 3
Excel处理: xlsx
加密: crypto-js
工程化：
代码规范: ESLint 9、Prettier、Stylelint
提交规范: Husky、Lint-staged、cz-git、commitlint
自动导入: unplugin-auto-import、unplugin-vue-components
构建分析: rollup-plugin-visualizer
压缩: vite-plugin-compression（gzip）
部署：
静态产物Nginx部署
快速开始
1、环境准备： 确认Node.js版本20.19.0及以上、pnpm版本8.8.0及以上，版本不满足先升级再装依赖，否则启动会报错。
node -v
pnpm -v
2、安装pnpm： 没装过pnpm的先全局安装，推荐用pnpm管理依赖，npm装会有peer依赖警告。
npm install -g pnpm
3、下载项目：
cd art-design-pro
4、安装依赖：
cd art-design-pro
pnpm install
5、启动开发服务： 跑pnpm dev，Vite启动后自动打开浏览器，默认监听http://localhost:3006，先完整浏览所有页面能力。
pnpm dev
6、切换权限模式： 打开.env文件，把VITE_ACCESS_MODE改成frontend或backend，前端模式用asyncRoutes.ts里的静态路由+roles过滤，后端模式通过Network面板看菜单接口返回格式对接自己的后端。
VITE_ACCESS_MODE = backend
7、对接表格分页：
recordFields: ["list", "data", "records", "items", "yourCustomField"]
8、清理演示数据： 备份代码后跑pnpm clean:dev，按提示输yes，演示页面、Mock、示例路由全清掉，得到纯净骨架接业务模块。
pnpm clean:dev
9、打包构建： 业务接完跑pnpm build，vue-tsc先做类型检查再Vite打包，默认开gzip压缩，产物在dist目录，扔Nginx静态目录即可。
pnpm build
更新进度
1000+优质开源项目更新进度：561/1000。如需更多类型优质项目推荐，请在文章后留言。
开源地址
往期精彩
王炸，可商用 ！一款基于SpringBoot实现的考试学习系统，支持题库管理+在线考试+阅卷+数据看板，开箱即用
AI+旅游的新玩法！包含三端，推荐一个AI + langchain4j + 协同过滤算法 + 小程序的三端乐牛旅游系统，可开箱即用
再见Notion！一款超高颜值的开源跨平台日记工具，内置md编辑、音频视频附件、地图足迹、混元大模型等完整功能
获取更多精彩内容和开源项目 ，请关注微信公众号！
免责声明
1、本文所分享的软件、代码或资源，均来自开源社区，遵循其原始许可证（如MIT、GPL等）。仅供学习和研究使用，严禁用于任何违法行为。
2、使用者在下载、部署或使用本项目（或文中提及的软件）时，需自行判断其适用性与合法性，由此产生的一切风险与责任均由使用者自行承担。
3、我们尊重原作者的知识产权，已在文中注明来源及原始作者（如有遗漏，请联系我们及时更正或删除）。
4、本文不对开源软件的安全性、可用性或完整性做任何保证，亦不承担由其引发的任何直接或间接损失责任。
5、若您为相关软件/资源的版权方，对内容有异议，请联系我们，我们将在第一时间处理
商务合作、软件开发、项目推广、GPT账号、GPT-PLUS，请联系：
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
