快速构建！一款兼具设计美学与高效开发的后台系统模版！

大家好，我是 Java陈序员。

做后台管理系统，最怕什么？怕从零搭框架、配路由、写表格、调样式...一周过去，真正的业务代码一行没写。更怕界面简陋、交互生硬，客户看了直摇头。

今天，给大家介绍一款开源的后台系统模板，兼具设计美学与高效开发！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

art-design-pro —— 一款基于 ElementPlus 设计，专注于用户体验和快速开发的开源后台管理解决方案，提供美观、实用的前端界面，帮助你轻松构建高质量的后台系统。

功能特色：

• 极速上手：简洁的架构设计、清晰的代码结构和详细的使用说明，配合完整的开发文档，即使是后端开发者也能快速上手
• 丰富的组件库：内置数据展示、表单处理、图标、富文本等多种高质量组件，同时组件设计灵活可扩展
• 现代化 UI 设计：采用流畅的交互设计，界面简洁美观，注重细节打磨，为用户提供舒适的视觉体验
• 高效开发工具：内置 useTable、ArtForm 等实用 API, 封装常见业务逻辑，开发者只需专注于业务实现，不用重复造轮子

技术栈：Vue3 + TypeScript + Vite + Element Plus + Tailwind

快速开始

环境要求：Node.js 20.19.0 及以上版本。

1、克隆或下载项目源码

git clone https://github.com/Daymychen/art-design-pro

2、项目结构

├── src
│   ├── api                     # API 接口相关代码
│   │   ├── auth.ts             # 认证相关的 API 接口定义（如登录、注册、用户信息）
│   │   └── system-manage.ts    # 系统管理相关的 API 接口定义（如菜单、用户、角色管理）
│   ├── App.vue                 # Vue 根组件，定义应用的全局结构和入口
│   ├── assets                  # 静态资源目录
│   │   ├── images              # 图片资源目录
│   │   ├── styles              # 全局样式文件
│   │   └── svg                 # SVG 相关资源
│   ├── components              # 组件目录
│   │   ├── business            # 业务组件（业务相关的自定义组件）
│   │   └── core                # 核心组件（系统级通用组件库）
│   ├── config                  # 项目配置目录
│   │   ├── assets              # 静态资源配置
│   │   ├── modules             # 模块化配置
│   │   ├── index.ts            # 配置入口文件
│   │   └── setting.ts          # 系统设置配置
│   ├── directives              # Vue 自定义指令
│   │   ├── business            # 业务指令
│   │   ├── core                # 核心指令
│   │   └── index.ts            # 指令入口文件
│   ├── enums                   # 枚举定义
│   │   ├── appEnum.ts          # 应用级枚举（如主题类型、语言类型）
│   │   └── formEnum.ts         # 表单相关枚举（如表单状态、验证规则）
│   ├── env.d.ts                # TypeScript 环境声明文件
│   ├── hooks                   # Vue 3 Composable 函数（可复用逻辑）
│   │   ├── core                # 核心 Hooks
│   │   └── index.ts            # Hooks 入口文件
│   ├── locales                 # 国际化（i18n）资源
│   │   ├── index.ts            # 国际化入口文件
│   │   └── langs               # 多语言文件
│   ├── main.ts                 # 项目主入口文件
│   ├── mock                    # Mock 数据目录
│   │   ├── json                # JSON 格式的 Mock 数据
│   │   ├── temp                # 临时 Mock 数据
│   │   └── upgrade             # 更新日志数据
│   ├── plugins                 # 插件配置
│   │   ├── echarts.ts          # ECharts 图表库配置
│   │   └── index.ts            # 插件入口文件
│   ├── router                  # Vue Router 路由相关代码
│   │   ├── core                # 路由核心功能
│   │   ├── guards              # 路由守卫
│   │   ├── modules             # 路由模块定义
│   │   ├── routes              # 路由配置
│   │   ├── index.ts            # 路由主入口
│   │   └── routesAlias.ts      # 路由别名定义
│   ├── store                   # Pinia 状态管理
│   │   ├── modules             # 状态管理模块
│   │   └── index.ts            # Pinia 入口文件
│   ├── types                   # TypeScript 类型定义
│   │   └── index.ts            # 类型定义总入口
│   ├── utils                   # 工具函数目录
│   │   ├── constants           # 常量定义
│   │   ├── form                # 表单相关工具
│   │   ├── http                # HTTP 请求工具
│   │   ├── navigation          # 导航相关工具
│   │   ├── storage             # 存储相关工具
│   │   ├── sys                 # 系统相关工具
│   │   ├── table               # 表格相关工具
│   │   ├── ui                  # UI 相关工具
│   │   ├── index.ts            # 工具函数总入口
│   │   └── router.ts           # 路由工具函数
│   └── views                   # 页面组件目录
├── tsconfig.json               # TypeScript 配置文件
└── vite.config.ts              # Vite 配置文件

3、进入项目根目录并安装依赖

cd art-design-pro

# 使用 pnpm 工具安装依赖，推荐使用 pnpm
npm install -g pnpm
# 或者
yarn global add pnpm

# 安装依赖
pnpm install

# 如果 pnpm install 安装失败，尝试使用下面的命令安装依赖
pnpm install --ignore-scripts

4、运行启动

pnpm run dev

5、启动成功后，浏览器访问

http://localhost:3006

功能体验

• 登录页

• 仪表盘

• 模板中心

• 组件中心

• 功能示例

• 系统管理

• 锁屏

• 深色主题

可以说，art-design-pro 是一个集设计美学与高效开发于一体的后台系统模板。无论是需要快速交付项目的开发者，还是追求产品体验的技术负责人，它都完可以满足需求。快去体验吧~

项目地址：https://github.com/Daymychen/art-design-pro

最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

https://chencoding.top:8090/#/

我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目。

但是任何人在群里打任何广告，都会被 T 掉。

如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群：

关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群。

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！

---