A great Vue3 backend management solution that focuses on user experience and visual design using Vite + TypeScript + Element Plus.

一款出色的专注于用户体验和视觉设计的使用 Vite + TypeScript + Element Plus 的 Vue3 后台管理解决方案

1
2
3
4
5
6
7
8

git clone git@github.com:Barry-Flynn/art-design.git


pnpm install


pnpm dev

01 About Art Design 关于本项目

This project, Art Design, is an open-source backend management solution based on Vue3, TypeScript, Vite, and Element Plus. It is a lightweight version of Art Design Pro and will be continuously maintained by @Barry-Flynn. (ChangeLog)

Thank you @SuperManTT for bringing Art Design Pro, such a beautiful and high-quality project, to the open source community. The mission of Art Design is to follow the updates of Art Design Pro, remove complex example pages and unnecessary features and components, and welcome front-end beginners or developers who want to build backend management projects from the initial state with the simplest code.

本项目 Art Design 是一个基于 Vue3、TypeScript、Vite、Element-Plus 的开源后台管理解决方案，是 Art Design Pro 的精简版（即轻量版、简化版），将由 @百里飞洋 持续维护。（更新日志）

感谢 @SuperManTT 为开源社区带来 Art Design Pro 这个如此精美的高质量项目。Art Design 的使命是跟随 Art Design Pro 的更新，去除复杂的示例页面和非必要的功能和组件，以最精简的代码迎接前端新手或者想要从初始状态搭建后台管理项目的开发者。

• Art Design（开源仓库）https://github.com/Barry-Flynn/art-design
• Art Design（开源仓库）https://gitee.com/Barry-Flynn/art-design
• Art Design Pro（开源仓库）https://github.com/Daymychen/art-design-pro
• Online Demo（在线演示）https://www.lingchen.kim/art-design-pro
• Develop Docs（开发文档）https://www.lingchen.kim/art-design-pro/docs

02 Demo Images 演示图

2.1 Light Theme 浅色主题

2.2 Dark Theme 深色主题

03 Why choose Art Design 为什么选择本项目

• Uses the latest technology stack（使用最新技术栈）
• Built-in common business component templates（内置常用业务组件模版）
• Provides multiple theme modes and customizable themes（提供多种主题模式，可以自定义主题）
• Beautiful UI design, excellent user experience, and attention to detail（漂亮的界面设计、极致的用户体验和细节处理）
• System fully supports customization, meeting your personalized needs（系统全面支持自定义设置，满足您的个性化需求）

3.1 Technology Stack 技术栈

• Development Framework（开发框架）：Vue3、TypeScript、Vite、Element-Plus
• Code Standards（代码规范）：Eslint、Prettier、Stylelint、Husky、Lint-staged、cz-git

3.2 Functional Features 功能特色

• Rich theme switching（丰富主题切换）
• Global search（全局搜索）
• Lock screen（锁屏）
• Multi-tabs（多标签页）
• Global breadcrumbs（全局面包屑）
• Multi-language support（多语言）
• Icon library（图标库）
• Rich text editor（富文本编辑器）
• Echarts charts（Echarts 图表）
• Utils toolkit（Utils 工具包）
• Network exception handling（网络异常处理）
• Route-level authentication（路由级别鉴权）
• Sidebar menu authentication（侧边栏菜单鉴权）
• Authentication directives（鉴权指令）
• Mobile adaptation（移动端适配）
• Excellent persistent storage solution（优秀的持久化存储方案）
• Local data storage validation（本地数据存储校验）
• Code commit validation and formatting（代码提交校验与格式化）
• Code commit standardization（代码提交规范化）

3.3 Compatibility 兼容性

Supports modern mainstream browsers such as Chrome, Safari, Firefox, etc.

支持 Chrome、Safari、Firefox 等现代主流浏览器。

04 How to Use 使用说明

4.1 Install and Run 安装和运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

git clone git@github.com:Barry-Flynn/art-design.git





pnpm install





pnpm dev

4.2 How to Keep Your Code Up-to-Date 代码如何保持最新

After cloning this repository (origin), add your own Git repository as a remote source (up)

克隆本仓库后（origin），添加自己的 git 仓库作为远程源（up）

1
2
3
4
5
6
7
8
9
10
11

git remote -v



git remote add up <your-git-url>



git remote -v

Push code to your own repository (up)

推送代码到自己的仓库（up）

1
2
3

git add .
git commit -m "commit message"
git push up main

Pull code from your own repository (up)

从自己的仓库获取最新代码（up）

1

git pull up main

Pull code from the original repository (origin)

从原始仓库获取最新代码（origin）

1
2
3
4
5
6
7
8
9

git pull origin main



git add .
git commit -m "commit message"
git push up main

05 Technical Support 技术支持

06 Donation 捐赠开发者

If this project has been helpful to you, donations are welcome! Your support will be used to purchase tools like ChatGPT, Copilot, Cursor, etc., to improve development efficiency and make the project even better. Thank you for your encouragement and support!

如果这个项目对你有所帮助，欢迎捐赠支持！你的支持将用于购买 ChatGPT、Copilot、Cursor 等工具，以提升开发效率，让项目变得更好。感谢你的鼓励与支持！

AliPay	WeChat

You are also welcome to go and reward the authors of Art Design Pro!

也欢迎你前往打赏 Art Design Pro 的作者！