Art Design

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
# Clone repository by SSH
git clone git@github.com:Barry-Flynn/art-design.git

# Install dependencies
pnpm install

# Start local development environment
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 的更新，去除复杂的示例页面和非必要的功能和组件，以最精简的代码迎接前端新手或者想要从初始状态搭建后台管理项目的开发者。

02 Demo Images 演示图

2.1 Light Theme 浅色主题

Light Theme

Light Theme

2.2 Dark Theme 深色主题

Dark Theme

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
# Clone repository by SSH
git clone git@github.com:Barry-Flynn/art-design.git

# Or clone repository by HTTPS
# git clone https://github.com/Barry-Flynn/art-design.git

# Install dependencies
pnpm install

# If pnpm install fails, try using the following command to install dependencies
# pnpm install --ignore-scripts

# Start local development environment
pnpm dev

# Build for production
# pnpm build

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
# Check the status of the remote source
# 查看远程仓库列表
git remote -v

# Add remote source, where 'up' is a custom name that can be changed to any name you like
# 添加远程源，其中 up 为自定义名称，可自行更改成任何你喜欢的名字
git remote add up <your-git-url>

# Check the status of the remote source
# 查看远程仓库列表
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
# Recommend regular execution to obtain the latest code
# 建议定期执行，以获取最新代码
git pull origin main

# If there are code conflicts, resolve them first
# 如果有代码冲突，请先解决
git add .
git commit -m "commit message"
git push up main

05 Technical Support 技术支持

Art Design Art Design Pro
QQ 群 1045381331（点击进群） 821834289（点击进群）
Discord https://discord.gg/57wWM7KD

Star History Chart

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
支付宝AliPay 微信WeChat

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

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