# nuts-ui

**Repository Path**: qmake-itech/nuts-ui

## Basic Information

- **Project Name**: nuts-ui
- **Description**: 基于vue3、vite、arco开源即用的后台管理系统前端框架，围绕着前端框架vue3技术进行开发，页面友好、设计合理，使用字节开源的Arco组件库作为项目组件，页面风格大方好看，色彩辨识度高，集成了权限管理、字典参数管理、系统公告等功能，既可以作为学习前端技术的良好模板也可以作为揽接私活的利器。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 1
- **Created**: 2023-02-12
- **Last Updated**: 2023-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, 后台管理系统, Arco, vite

## README

# nuts-ui

#### 项目说明
- nuts-ui是一个基于vue3全家桶、pinia、arco组件库的开箱即用的后台管理系统前端框架
- nuts-ui是一个属于个人学习交流性质的项目，目前已经实现后台管理基本功能，未来计划更新基于bpmn2.0的工作流功能、登录及操作日志功能等，欢迎交流学习。
- 本项目目前处于早期测试版本，尚有较多的bug，例如未进行前端必输校验等，同时本项目目前由我一人在工作之余开发，若有bug可以及时提出，有新需求想让我添加的也可以提出issue，大家一起交流学习，共同进步，争取早日实现企业级中后台管理框架的研发！
- 后端地址: https://gitee.com/nuts-code/nuts-fast

#### 内置功能
1.  用户管理: 用户是系统的主要操作人员，该功能用于配置登录用户的各项信息。
2.  菜单管理: 配置整个系统的各项功能的菜单、操作等。
3.  角色管理: 本项目作为RABC权限模型为基准开发的后台权限系统，角色功能主要作为用户的前端登录控制，后期计划添加颗粒度至api级。
4.  字典管理: 整个项目使用统一的字典管理模块进行控制，前端也设计了专门的字典组件。
5.  系统参数: 对系统动态配置常用参数。
6.  系统公告: 系统通知公告信息发布维护，目前已经实现了通知功能。

#### 未来计划
1. 流程模型在线设计
2. 流程实例管理
3. 个人流程管理(待办、已办、申请、关注)
4. 登录日志在线查看
5. 请求日志在线查看
6. 登录状态管理
7. 在线表单设计
8. 代码生成
9. 。。。

#### 项目特点
- 使用Pinia作为项目的状态管理
- 使用自定义的字典组件，可以通过业务手工修改字典完成前端字典的升级
- 使用vue3全家桶等主流先进技术进行开发
- 较为灵活的权限控制，可以控制到菜单及按钮，满足大多数情况
- 使用字节开源的Arco组件库进行开发，设计精美、合理
- 使用vxe-table作为项目的表格组件，性能较高

#### 技术选型
- vite 4.0.0
- vue 3.2.45
- pinia 2.0.28
- vue-router 4.1.6
- vxe-table 4.3.7
- less 4.1.3
- arco-design 2.42.0

#### 部署方式
- 使用pnpm启动即可，使用前先启动后端代码

#### 演示地址
- 演示地址将在近期放出，尽情期待

#### 联系方式
- 邮箱 yaya_tech@aliyun.com 欢迎大家提出问题、进行交流

#### 系统截图
<table>
    <tr>
      <td><img src="./src/assets/demo-image/login.jpg" /></td>
      <td><img src="./src/assets/demo-image/home.jpg" /></td>
    </tr>
    <tr>
      <td><img src="./src/assets/demo-image/menu2.jpg" /></td>
      <td><img src="./src/assets/demo-image/menu.jpg" /></td>
    </tr>
    <tr>
      <td><img src="./src/assets/demo-image/user.jpg" /></td>
      <td><img src="./src/assets/demo-image/notice.jpg" /></td>
    </tr>
    <tr>
      <td><img src="./src/assets/demo-image/dict.jpg" /></td>
      <td><img src="./src/assets/demo-image/search.jpg" /></td>
    </tr>
    <tr>
      <td><img src="./src/assets/demo-image/dark.jpg" /></td>
      <td><img src="./src/assets/demo-image/dark2.jpg" /></td>
    </tr>
</table>