快速构建！一款兼具设计美学与高效开发的后台系统模版！
<p>大家好，我是 <code>Java陈序员</code>。</p><p>做后台管理系统，最怕什么？怕从零搭框架、配路由、写表格、调样式...一周过去，真正的业务代码一行没写。更怕界面简陋、交互生硬，客户看了直摇头。</p>
<p>今天，给大家介绍一款开源的后台系统模板，兼具设计美学与高效开发！</p>
<blockquote>
<p>关注微信公众号：【Java陈序员】，获取<strong>开源项目分享、AI副业分享、超200本经典计算机电子书籍等。</strong></p>
</blockquote>
<h2 id="项目介绍">项目介绍</h2>
<p><code>art-design-pro</code> —— 一款基于 ElementPlus 设计，专注于用户体验和快速开发的开源后台管理解决方案，提供美观、实用的前端界面，帮助你轻松构建高质量的后台系统。</p>
<p><strong>功能特色</strong>：</p>
<ul>
<li><strong>极速上手</strong>：简洁的架构设计、清晰的代码结构和详细的使用说明，配合完整的开发文档，即使是后端开发者也能快速上手</li>
<li><strong>丰富的组件库</strong>：内置数据展示、表单处理、图标、富文本等多种高质量组件，同时组件设计灵活可扩展</li>
<li><strong>现代化 UI 设计</strong>：采用流畅的交互设计，界面简洁美观，注重细节打磨，为用户提供舒适的视觉体验</li>
<li><strong>高效开发工具</strong>：内置 useTable、ArtForm 等实用 API, 封装常见业务逻辑，开发者只需专注于业务实现，不用重复造轮子</li>
</ul>
<p><strong>技术栈</strong>：Vue3 + TypeScript + Vite + Element Plus + Tailwind</p>
<h2 id="快速开始">快速开始</h2>
<blockquote>
<p>环境要求：Node.js 20.19.0 及以上版本。</p>
</blockquote>
<p>1、克隆或下载项目源码</p>
<pre><code class="language-bash">git clone https://github.com/Daymychen/art-design-pro
</code></pre>
<p>2、项目结构</p>
<pre><code class="language-bash">├── 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 配置文件
</code></pre>
<p>3、进入项目根目录并安装依赖</p>
<pre><code class="language-bash">cd art-design-pro
# 使用 pnpm 工具安装依赖，推荐使用 pnpm
npm install -g pnpm
# 或者
yarn global add pnpm
# 安装依赖
pnpm install
# 如果 pnpm install 安装失败，尝试使用下面的命令安装依赖
pnpm install --ignore-scripts
</code></pre>
<p>4、运行启动</p>
<pre><code class="language-bash">pnpm run dev
</code></pre>
<p>5、启动成功后，浏览器访问</p>
<pre><code class="language-bash">http://localhost:3006
</code></pre>
<h2 id="功能体验">功能体验</h2>
<ul>
<li><strong>登录页</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/art-design-pro/img-20260331144016.png"></p>
<ul>
<li><strong>仪表盘</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/art-design-pro/img-20260331144557.png"></p>
<ul>
<li><strong>模板中心</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/art-design-pro/img-20260331144629.png"></p>
<ul>
<li><strong>组件中心</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/art-design-pro/img-20260331144714.png"></p>
<ul>
<li><strong>功能示例</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/art-design-pro/img-20260331144809.png"></p>
<ul>
<li><strong>系统管理</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/art-design-pro/img-20260331144841.png"></p>
<ul>
<li><strong>锁屏</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/art-design-pro/img-20260331144911.png"></p>
<ul>
<li><strong>深色主题</strong></li>
</ul>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/art-design-pro/img-20260331144954.png"></p>
<p>可以说，<code>art-design-pro</code> 是一个集设计美学与高效开发于一体的后台系统模板。无论是需要快速交付项目的开发者，还是追求产品体验的技术负责人，它都完可以满足需求。快去体验吧~</p>
<pre><code class="language-bash">项目地址：https://github.com/Daymychen/art-design-pro
</code></pre>
<h2 id="最后">最后</h2>
<p>推荐的开源项目已经收录到 <code>GitHub</code> 项目，欢迎 <code>Star</code>：</p>
<pre><code>https://github.com/chenyl8848/great-open-source-project
</code></pre>
<p>或者访问网站，进行在线浏览：</p>
<pre><code>https://chencoding.top:8090/#/
</code></pre>
<p><img src="https://create-center.oss-cn-shenzhen.aliyuncs.com/github/img-20250608222400.png"></p>
<p><strong>我创建了一个开源项目交流群，方便大家在群里交流、讨论开源项目</strong>。</p>
<p><strong>但是任何人在群里打任何广告，都会被 T 掉</strong>。</p>
<p><strong>如果你对这个交流群感兴趣或者在使用开源项目中遇到问题，可以通过如下方式进群</strong>：</p>
<p><strong>关注微信公众号：【Java陈序员】，回复【开源项目交流群】进群，或者通过公众号下方的菜单添加个人微信，并备注【开源项目交流群】，通过后拉你进群</strong>。</p>
<blockquote>
<p>大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！</p>
</blockquote>
<hr><br><br>
来源：https://www.cnblogs.com/codechen8848/p/19805514
頁:
[1]