# RuoYi-ArcoDesignVue

**Repository Path**: renneseme/ruoyi-arco-design-vue

## Basic Information

- **Project Name**: RuoYi-ArcoDesignVue
- **Description**: 使用Arco Design Pro + Vite + Vue3 + TypeScript编写RuoYi-Vue前端。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 55
- **Forks**: 30
- **Created**: 2022-11-08
- **Last Updated**: 2025-06-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript, 后台

## README

<h1 align="center">RuoYi-ArcoDesignVue</h1>

> RuoYi-ArcoDesignVue 是使用TypeScript的Arco Design Pro重写Ruoyi-Vue前端。

------------------------------

## 简介

**RuoYi-ArcoDesignVue**，使用[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue)作为后端，使用Arco Design Pro的前端编写。


> RuoYi-Vue是基于SpringBoot，Spring Security，JWT，Vue 的前后端分离权限管理系统。
>
> 拥有用户管理、部门管理、岗位管理、菜单管理、角色管理、字典管理、参数管理、通知公告、操作日志、登录日志、在线用户、定时任务、代码生成、系统接口、服务监控、在线构建器、连接池监视等功能。


* RuoYi-Vue文档：[https://doc.ruoyi.vip/ruoyi-vue/](https://doc.ruoyi.vip/ruoyi-vue/)

* Arco Design Vue文档：[https://arco.design/vue](https://arco.design/vue/)


## 软件架构

* 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [Arco Design Pro](https://arco.design/) + [Vite](https://cn.vitejs.dev) + TypeScript版本。
* 配套后端代码仓库地址[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue) 版本。


## 开始使用

1. 环境准备
   * 运行启动RuoYi-Vue，参考[RuoYi文档](https://doc.ruoyi.vip/ruoyi-vue/)
   * 安装[node](http://nodejs.org/)和[git](https://git-scm.com/)

2. 安装

   ```shell
   git clone https://gitee.com/renneseme/ruoyi-arco-design-vue.git
   ```

3. 本地开发

   进入项目根目录

   ```shell
   yarn
   ```


   ```shell
   yarn dev
   ```

   > 打开浏览器访问 [http://localhost:8991](http://localhost:8991/)

## 演示图

<table>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-31-29.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-27-59.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-28-34.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-28-40.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-29-20.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-29-28.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-29-34.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-29-41.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-29-47.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-30-17.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-30-29.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-30-35.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-08-03_16-49-00.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-08-03_16-50-30.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-08-03_16-50-42.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-30-56.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-31-02.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-08-03_16-52-27.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-08-03_16-51-52.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-08-03_16-51-27.png"/></td>
    </tr>
    <tr>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-31-13.png"/></td>
        <td><img src="https://gitee.com/renneseme/ruoyi-arco-design-vue/raw/master/docs/demo/Snipaste_2023-03-08_18-31-19.png"/></td>
    </tr>
</table>