智能摘要
你是否厌倦了千篇一律、体验平平的后台管理系统？作为一名开发者，我深知高效与美观兼得的系统有多难得。于是，我打造了 Art Design Pro——一款基于 Vue3 + TypeScript + Element-Plus 的开源后台解决方案。它不仅拥有惊艳的浅色/暗黑双主题与极致细节设计，更内置丰富业务组件、多语言支持、路由鉴权、全局搜索等实用功能，开箱即用，助你快速构建专业级管理后台。技术前沿，配置灵活，支持自定义主题与代码规范体系，真正实现美观与工程化的完美融合。
关于 Art Design Pro
作为一名开发者（陈涛的博客），在多个项目中需要搭建后台管理系统，但发现传统系统在用户体验和视觉设计上不能完全满足需求。因此，我创建了 Art Design Pro，一款专注于用户体验和快速开发的开源后台管理解决方案。基于 ElementPlus 设计规范，进行了视觉上的精心优化，提供更美观、更实用的前端界面，帮助你轻松构建高质量的后台系统。
演示图
浅色主题
暗黑主题
特点
- 使用最新技术栈
- 内置常用业务组件模版
- 提供多种主题模式，可以自定义主题
- 漂亮的 UI设计、极致的用户体验和细节处理
- 系统全面支持自定义设置，满足您的个性化需求
技术栈
- 开发框架：Vue3、TypeScript、Vite、Element-Plus
- 代码规范：Eslint、Prettier、Stylelint、Husky、Lint-staged、cz-git
功能
- 丰富主题切换
- 全局搜索
- 锁屏
- 多标签页
- 全局面包屑
- 多语言
- 图标库
- 富文本编辑器
- Echarts 图表
- Utils工具包
- 网络异常处理
- 路由级别鉴权
- 侧边栏菜单鉴权
- 鉴权指令
- 移动端适配
- 优秀的持久化存储方案
- 本地数据存储校验
- 代码提交校验与格式化
- 代码提交规范化
兼容性
- 支持 Chrome、Safari、Firefox 等现代主流浏览器。
安装运行
# 安装依赖
pnpm install
# 如果 pnpm install 安装失败，尝试使用下面的命令安装依赖
pnpm install --ignore-scripts
# 本地开发环境启动
pnpm dev
# 生产环境打包
pnpm build
这UI看着就舒服，已经clone了代码试试
暗黑模式真香，晚上写代码不伤眼了👍
用Vue3+TS搭后台确实顺手，不过ElementPlus的自定义主题有点难搞，你们咋解决的？
之前搞过一个后台项目，样式调到吐血，要是早遇到这个库就好了
听说pnpm有时候依赖解析有问题，是不是最好加个lockfile版本说明？
移动端适配做得咋样？我们这边还得兼容平板竖屏
锁屏功能挺有意思，但会不会影响长时间操作的体验啊？
我刚入门前端不久，这种脚手架级别的项目适合新手直接上手吗？
hhh 路由鉴权这块终于不用自己从零写了，省半天事
多语言支持是用vue-i18n吗？有没有考虑切换时持久化当前语言？
@幻象之镜 多语言是用vue-i18n，语言切换会存localStorage里，刷新不丢失
看着就想马上上手
@李纨教子 别光看啊，赶紧拉代码跑起来试试水
这套主题切换和全局搜索的实现真是省心，配合Vue3的响应式，开发效率明显提升，尤其是路由鉴权的封装，让权限管理不再头疼。👍
自带的Echarts组件已经封装好，直接挂上就能用
暗黑主题配色可自行调整吗？
锁屏功能如果误触，真的会卡住操作
我之前也在项目里折腾过主题切换，遇到样式冲突，这套方案省了好多时间
文档写得有点简略
@糖人胡 文档后续会补全，现在确实赶着上线有点糙
看到有人抱怨ElementPlus太臃肿
整体体验挺不错
如果要在移动端的竖屏平板上使用，侧边栏会自动折叠吗？
这个配置搭起来真丝滑，TS校验严一点反而省debug时间
听说ElementPlus主题难搞，你们是怎么做到自定义这么顺的？
hhh 锁屏误触真能卡住，我试了下差点以为浏览器崩了
暗黑主题配色能不能自定义？我们设计稿有品牌色要求
刚入门的小白问下，这种项目直接拿去公司用会不会踩坑？
之前自己写路由鉴权写到头大，这个封装直接省半天
移动端平板竖屏还没实测，侧边栏应该不会自动折叠
UI这块真没得说，一看就是细节控，爱了爱了
文档再补点实战例子就更香了，比如权限怎么配
听说pnpm有依赖问题，建议锁个lockfile版本防踩雷