# GrayFaith管理系统-Vue3前端

**Repository Path**: GrayFaith_admin/ManagementSystem-FE

## Basic Information

- **Project Name**: GrayFaith管理系统-Vue3前端
- **Description**: GrayFaith开源管理系统-前端
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2022-10-11
- **Last Updated**: 2025-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3通用管理系统前端

该项目是作者全新手动搭建的,目前处于初期建设阶段

拿到手先执行
yarn add file:./src/config/CKEditor5/ckeditor5-40.2.0-full

然后找到
node_modules/axios/package.json
按照下列方式修改↓
```
(已添加patch文件,现在不需要手动处理)
"exports": {
    ".": {
      "types": {
        "require": "./index.d.cts",
        "default": "./index.d.ts"
      },
      ...
    },
    ...
}
把其中的"./index.d.cts",改为"./index.d.ts"
或者将index.d.cts彻底删除
```
这是官方更新出来的神奇问题,会导致之前的代码ts检查出问题

目前正在优化项目框架和编写基础功能

旨在使用vue3建立一个[优雅]的[规范]的[通用]的管理系统

本系统的注释通常会很多,所以不用想操作门槛高,不会使用的问题

设计思路为:用到才加载,不用不加载,给浏览器减负,增加用户体验感,整个系统像火箭

特别强调:按需加载/按需引入/按需导入根本不是一个概念!该项目都用了

## 关于优化

```
本系统的优化巨多,按需加载/按需引入,区块切割,压缩...
以及一些冷门的优化,
甚至优化到了图片的大小和SVG图的异步加载...
```

## 现阶段目标

-[X] 添加Tab+动态自定义异步组件的扩展功能

-[X] 优化Tab+动态自定义异步组件的功能稳定性

-[X] 优化图片的格式,使用<s><u>AVIF(嘎掉)</u></s>或WebP的格式以获得更快的图片加载速度(建议使用PhotoShopCC2023以上)

-[X] 优化富文本编辑器

-[X] 优化系统公告

-[x] 优化index.html页面加载中的等待动画

-[x] 增加vxe-table的样式,使其可以拥有暗黑模式主题

-[X] 新增一系列好用的文件上下载组件(支持真实进度条,支持真实取消请求)

-[X] 优化错误页面的友好度

-[X] 为异步动态自定义组件添加SessionStorage的支持

-[X] 让Tabs中打开页在浏览器刷新之后依旧保持

-[X] 让Tabs中打开页在浏览器刷新之后只加载当前激活页(懒加载)

-[X] 优化vite-plugin-svg-icons导致的页面DOM加载过多的问题(这是个官方的负优化,为了处理vite-plugin-svg-icons留下的烂摊子,使用了ADCCRTLT技术加载)

-[X] 实现 [ "优雅的"异步动态自定义组件实时加载技术 ] Asynchronous dynamic custom component realTime loading简称ADCCRTLT

-[X] 使用rollup实现编译后的文件按项目路径输出,解决了同一目录下文件过多导致的查找文件变慢问题

-[X] 增加页面控制权限

-[X] 更新vxe-table到4.7.x版本,重新梳理写法,添加复用的渲染器等

-[X] 完善角色维护页面

-[X] 完善菜单维护页面

-[X] 完善字典维护页面

-[X] 完善公告维护页面

-[X] 完善租户维护页面

## 下阶段目标

-[ ] 完善个人信息维护页面的头像展示和上传功能

-[ ] 开发岗位维护页面

-[ ] 开发在线用户管理页面

-[ ] 开发分布式文件管理页面

-[ ] 开发日志管理页面

-[ ] 开发代码生成器页面

-[ ] 开发流程页面(计划使用飞龙Flow,暂定)

-[ ] 开发监控页面

-[ ] 开发任务调度页面

-[ ] 开发数据源维护页面


## 关于*.svg文件的按需转换

```
Q:为什么要对svg进行转换?直接使用vite-plugin-svg-icons不好吗?
A:因为vite-plugin-svg-icons方式会给页面的DOM加载量带来不利的影响,
  而且vite-plugin-svg-icons插件会使rollup打包消耗的时间增加数倍,
  因此得出结论必须要干掉vite-plugin-svg-icons插件;
  但是市面上并没有很好的方式对大量SVG进行按需加载和按需引入
  于是作者就自行研究出了 [ "优雅的"异步动态自定义组件实时加载技术 ]
  之后便使用PowerShell来对SVG进行按需转换,然后在SvgIcon
  组件中集成了该技术
```

```
切换到
/src/components/customComponents/icon/svg/
目录
先将xxx.svg的文件直接拷贝进
/src/components/customComponents/icon/svg/xxx/
然后优化修改下原始svg的标签
最后去执行脚本
batchTransform.ps1
脚本会递归转换当前目录下所有的*.svg文件
到此就完成了SVG的转换
```

## 演示图片

```
文件上传组件图
```

![图裂开了](presentationsImage/upload1.png '图1')
![图裂开了](presentationsImage/upload2.png '图2')

## 框架优势

```
精简,强悍,多样,简单封装,风格一体化...

使用了NaiveUI,好用且性能不错
相当精简的体积,执着的专注于前端的性能优化
相当流畅的速度,设计时没有一股脑的把用到的资源一起加载,而是分体式加载
启用了vite-plugin-pwa插件,来对前端的缓存优化
内置一些常用风格的功能组件
性能强大,浏览器Lighthouse性能跑分98!
大规模采用最佳实现,浏览器Lighthouse最佳实现跑分99分!
一看就会,内附性能优化手册
```

## 关于patch-package

```
由于某些库中存在一些写法会降低浏览器性能评价,以及一些官方写的BUG,
官方打死不修
故使用了patch-package
来进行针对性的修改,根目录下的patches文件夹放入的是对他们的补丁,
同时也不要瞎去修改他们的版本号,保持锁定即可,后续有更新会发出最新的补丁
```

## 关于配套后端

```
配套后端在此处
https://gitee.com/GrayFaith_admin/ManagementSystem-cloudBE.git
```
## 关于TypeScript使用规范

建议这样子写:
```
import type { Xxx1, Xxx2 } from '#xxx/xxx.d.ts';
const xxxConfig = reactive<Partial<Xxx1>>({});
```

```
如果遇到了处理不掉且不是自身写的TS,
可以尝试在那一行代码上加上下面的注解,即可跳过检查,
// @ts-ignore
但是建议通知该库的作者修复TS的问题
打死不修的,建议直接去锤它家大门,
或直接使用patch-package去打补丁
```

## 关于MOCK

```
使用Apifox进行的mock
数据文件请从后端导出
使用Apifox的IDEA插件导出后端的接口数据
在ApiFox中导入就能用
它会让你的本地调试更方便.
```

## NodeJs版本

```
推荐NodeJs20
NodeJs20以下不兼容(vite的问题)
```

## 开发工具

```
IntelliJ IDEA/IntelliJ WebStorm
```

## 如何贡献

非常欢迎你的加入！提一个 Issue 或者提交一个 Pull Request。

**Pull Request:**

1. Fork 代码!
2. 创建自己的分支: `git checkout -b feat/xxxx`
3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
4. 推送你的分支: `git push origin feat/xxxx`
5. 提交`pull request`

## Git 贡献提交规范

    - `feature-yyyy.mm.dd-功能名` 增加新功能
    - `fix-yyyy.mm.dd-功能名` 修复问题/BUG
    - `style-yyyy.mm.dd-功能名` 代码风格相关无影响运行结果的
    - `perf-yyyy.mm.dd-功能名` 优化/性能提升
    - `refactor-yyyy.mm.dd-功能名` 重构
    - `revert-yyyy.mm.dd-功能名` 撤销修改
    - `test-yyyy.mm.dd-功能名` 测试相关
    - `docs-yyyy.mm.dd-功能名` 文档/注释
    - `ci-yyyy.mm.dd-功能名` 持续集成
    - `types-yyyy.mm.dd-功能名` 类型定义文件更改

## 项目包管理器配置镜像

查看使用的镜像源

```
yarn config get registry
```

设置镜像源

```
yarn config set registry [地址]
```

设置淘宝镜像

```
yarn config set registry https://registry.npm.taobao.org
```

设置国内稳定多节点镜像(推荐)

```
yarn config set registry https://registry.npmmirror.com/
```

## 项目依赖包安装

```
yarn install
```

### 启动服务

使用调试模式启动服务

```
yarn dev
```

使用生产模式启动服务

```
yarn dev-prod
```

### 编译生产包

带有检查TS的编译

```
yarn check&build
```

或 单纯编译

```
yarn build
```

### Vite配置(服务器)

请翻阅[Vite配置](https://vitejs.dev/config/).

### RollUp配置(打包器插件)

请翻阅[Rollup配置](https://rollupjs.org/configuration-options/).

### CssNano配置(CSS优化插件)

请翻阅[CssNano配置](https://cssnano.co/docs/introduction/).

### Terser配置(JS优化插件)

请翻阅[Terser配置](https://terser.org/docs/api-reference).

### 忠告

```
食用前请一定要理解Vue3的语法和改动的地方,否则你可能会出现很多无法理解的问题
下列会列出一些问题来进行解答,即使不会Vue3也一定要看完,不然你会很痛苦!
```

### QA

```
1.
Q:为什么我获取到服务器端的数据后无法刷新数据了?
A:因为你不理解Vue3的ref和reactive机制,直接划=会取消掉变量的响应式特性,
  所以页面不会出现响应式渲染你请求到的数据,下列给出一些正确方式
  一:
  <script lang='ts' setup>
    ...
    const asd = reactive({name:'阿斯顿'});
    
    const getXXX = () => {
      // 获取服务器数据
      axios<any, JsonResultProps<any>, any>({
        xxx:xxx,
        ...
      }).then((jsonResult: JsonResultProps<any>) => {
        ...
        Object.assign(asd, jsonResult['data']);
        ...
      })
    }
  </script>
  二:
2.
Q:按需导入是什么?
A:按需导入主要用来缩小打包体积,剔除用不到的组件代码,
  Vite会在编译阶段替换裸模块路径,但仅限于裸模块,
  如import {Button} from 'xxx-ui';
  上述路径会被预编译,然后调试模式时使用整个xxx-ui的包,这样体积很大(但也不绝对).
  常用的按需导入指使用插件来进行路径的替换,
  如import {Button,Input} from 'xxx-ui';
  会被插件替换成下列类似的加载代码
  import Button from 'xxx-ui/es/button/index.ts';
  import Input from 'xxx-ui/es/input/index.ts';
  这样做的好处是:
  Vite会进行路径的替换,
  会在调试模式下对带有路径的模块进行预构建,
  在编译成生产文件的时候只会生成
  一个包含Button和Input组件的文件,体积将大大缩小
3.
Q:按需加载是什么?
A:按需加载主要用在优化浏览器的加载上,
  很多网站一打开就会加载一大堆资源,
  这样既浪费了带宽又延迟了用户进入网站的时间
  按需加载后,可以降低同一时间段内同时加载的文件数量和体积,
  甚至可以对UI库进行拆分加载
  (比如用到了某个库的Button,按需加载后仍然要加载一部分库的文件,
  其中可能包含了Button,Input,Modal,但我只想在这个页面使用Button,
  我就是不要把其他组件一起下载到浏览器,
  而按需加载则在该页面只导入了Button这一个组件,大大降低了带宽的浪费,
  但不幸的是:市面上很多UI库都暂不支持组件独立编译使用,
  虽然能够使用rollup的manualChunks功能强行把UI库的每个组件切割成独立文件,
  但是实际打开浏览器后会发现这些强行切割开来的文件不一定能使用,
  只能够自行想办法做到)

4.
Q:按需加载和按需导入的区别是什么?
A:不是我在咬文嚼字,而是按需加载真-和按需导入不一样,
  首先两者的概念就不同,按需导入是在编译期给你替换导入路径,剔除多余部分
  按需加载是体现在浏览器的加载上,不要混为一谈

5.
Q:为什么我的VxeUI.modal再WebStorm和IDEA中会报红线,但是实际上可以运行和编译?
A:因为作者使用了比较秀的写法尝试往其他包中已有的类型定义中追加属性声明,
  这个问题是作者导致的,目前4.7.x版本都有类似的TS问题,
  只要你的VxeUI.modal可以正常使用,就可以忽略掉VxeUI.modal的报错
```