niu-admin: 🚀🚀🚀NiuAdmin 是一个基于VUE3和elementPlus实现的一个新人友好可快速上手开发的中后台管理系统。主题自由切换、多种Layout布局、前端权限控制和后端权限控制供开发者选择。

![logo](./public/resource/img/niu.png)

<h1>NiuAdmin</h1>
</div>

## 简介

NiuAdmin 是一个基于 VUE3 和 elementPlus 实现的一个新人友好可快速上手开发的中后台管理系统。作者在公司开发期间一直使用的是<a href="https://github.com/anncwb/vue-vben-admin" target="_blank">VbenAdmin</a>，VbenAdmin 确实是一个非常棒的项目，可我也发现，VbenAdmin 对于 Vue3 新手快速上手开发是不太友好的。NiuAdmin 诞生的初衷便是让新人上手 Vue3 开发变得更简单，更快速。同时 NiuAdmin 也不可避免地受 VbenAdmin 的影响，但 NiuAdmin 只提供最原始的框架，不会去做过多的封装，所以 NiuAdmin 足够的小巧。同时 VbenAdmin 在我心中还是不可替代的存在，它让我学到了好多，NiuAdmin 便是致敬 VbenAdmin 的产物。

## 使用到的一些好玩的库

- <a href="https://motion.vueuse.org/" target="_blank">@vueuse/motion</a> ：vueuse/motion 是一个 Vue Composable，旨在通过简单而强大的 API 帮助您向 Vue 应用程序添加动画。

- <a href="https://zzz.dog/" target="_blank">Zdog</a> ：用于画布和 SVG 的圆形、扁平、设计师友好的伪 3D 引擎。Zdog 旨在将矢量插图的简单性带入 3D。绘制圆形和正方形既简单又有趣。Zdog 只是增加了另一个维度。

- <a href="https://github.com/airbnb/lottie-web" target="_blank">lottie-web</a> ：Lottie 是一个适用于 Web 和 iOS 的移动库，它可以解析用 Bodymovin 导出的 Adobe After Effects 动画的 json 文件，并在移动端进行原生渲染。

- <a href="https://lottiefiles.com/" target="_blank">lottieFiles</a> ：lottieFiles 网站提供了创建、编辑、测试和显示 Lottie 动画所需的所有工具。

- <a href="https://www.fastmock.site/#/login" target="_blank">fastmock</a> ：服务于前后端分离项目的接口 MOCK 平台。fastmock 让接口 mock 变得更加简单，让团队协作变得更加高效。

## 权限控制

项目中集成了两种权限处理方式：

- 通过用户角色来过滤菜单(前端方式控制)，菜单由路由配置自动生成。
- 通过后台来动态生成路由表(后台方式控制)。

### 前端角色权限

> 实现原理: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登陆后或者其他方式获取用户角色后，通过角色去遍历路由表，获取该角色可以访问的路由表，生成路由表，再通过 router.addRoutes 添加到路由实例，实现权限的过滤。

缺点: 权限相对不自由，如果后台改动角色，前台也需要跟着改动。适合角色较固定的系统

### 后台动态获取

> 实现原理: 是通过接口动态生成路由表，且遵循一定的数据结构返回。前端根据需要处理该数据为可识别的结构，再通过 router.addRoutes 添加到路由实例，实现权限的动态生成。

缺点: 后台返回的数据中的 component 字段的路径必须要和项目的组件路径保持一致。

## 部分截图

![login](./public/resource/img/login.gif)

## 安装依赖

```bash
npm install
```

### 运行

```bash
npm run serve
```

### 打包

```bash
npm run build
```

### 格式化代码

```bash
npm run prettier
```

### commit 提交代码

```bash
npm run commit
```

## Git 提交规范

- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))

- `feat` 增加新功能
  - `fix` 修复问题/BUG
  - `style` 代码风格相关无影响运行结果的
  - `perf` 优化/性能提升
  - `refactor` 重构
  - `revert` 撤销修改
  - `test` 测试相关
  - `docs` 文档/注释
  - `chore` 依赖更新/脚手架配置修改等
  - `workflow` 工作流改进
  - `ci` 持续集成
  - `types` 类型定义文件更改
  - `wip` 开发中

amilytom/niu-admin

About

Releases

Contributors

Activities

amilytom/niu-admin .gitee-modal { width: 500px !important; }

About

Releases

Contributors

Activities

Search

amilytom/niu-admin