# zero-admin

**Repository Path**: zmmlet/zero-admin

## Basic Information

- **Project Name**: zero-admin
- **Description**: zero-admin 是一个后台管理前端解决方案，它基于 vue 和 ant-design-vue 实现。它使用了最新的前端技术栈实现了动态路由、权限验证、自定义Vue指令封装、规范代码风格、项目内置脚手架、对接Echarts图形库。提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/zmmlet
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 3
- **Created**: 2023-01-06
- **Last Updated**: 2025-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Vuex, TypeScript, vite, vue3

## README

![](https://gitee.com/zmmlet/study-note/raw/master/images/Snipaste_2023-01-29_18-09-32.png)
![](https://gitee.com/zmmlet/study-note/raw/master/images/Snipaste_2023-01-29_18-09-40.png)


# zero-admin 项目介绍

zero-admin 是一个后台前端解决方案，它基于 vue3 和 ant-design-vue 实现。它使用了最新的前端技术栈【vue3+vue-router+typescript+axios+ant-design-vue+pinia+mockjs+plopjs+vite+Vitest】实现了动态路由、权限验证；自定义 Vue 指令封装；规范项目代码风格；项目内置脚手架解决文件创建混乱，相似业务模块需要频繁拷贝代码或文件问题；Echarts 图形库进行封装；axios 请求拦截封装，请求 api 统一管理；通过 mockjs 模拟数据；对生产环境构建进行打包优化，实现了打包 gzip 压缩、代码混淆，去除 console 打印，打包体积分析等；提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型


# 项目命令相关
## 项目依赖安装

```sh
pnpm install
```

## 开发环境运行（编译和热重新加载）

```sh
pnpm dev
```

## 打包部署运行（生产打包添加类型检查、编译）

```sh
pnpm build
```

## 运行单元测试 [Vitest](https://vitest.dev/)

```sh
pnpm test:unit
```

## 语法规则和代码风格检查 [ESLint](https://eslint.org/)

```sh
pnpm lint
```
# 项目文档/基建

1. [配置文档记录](./README_DISPOSE.md)
2. 项目基建
![](https://gitee.com/zmmlet/study-note/raw/master/images/Snipaste_2023-02-25_17-24-28.png)

# 功能列表

- [x] 配置项目代码风格 .prettierrc.json
- [x] 配置.vscode setting.json 文件，配置保存格式化
- [x] 添加 SCSS 到项目进行 CSS 预处理
- [x] 配置 vscode 别名跳转规则
- [x] 安装 ant design vue 并配置自动加载
  - [x] 由自动加载改为按需手动加载，解决加载缓慢问题 配置见 `src\plugins\antd.ts`
- [x] 配置 less 预处理，并自定义 ant Design Vue UI 主题
- [x] 解决 vite 首屏加载缓慢问题
- [x] pinia 数据持久化
- [x] 解决 pinia 使用报错问题
- [x] Layout 布局
- [x] Axios 封装
- [x] 菜单图标动态绑定
- [x] Vitest 单元测试
- [x] 集成打印插件
- [x] import.meta.glob 批量导入文件夹下文件
- [x] 配置 .env
- [x] 自定义按钮权限指令
- [x] 动态路由 filterAsnycRouter.ts
- [x] 路由权限
- [x] 按钮权限(目前和登录账号有关，和具体页面无关)
- [x] Echarts 集成
- [x] 路由懒加载
- [x] 项目打包优化
  - [x] 打包 Gzip 压缩
  - [x] 代码混淆
  - [x] 去除生产环境 console
  - [x] 打包体积分析插件
  - [x] 代码拆包，将静态资源分类
  - [x] 传统浏览器兼容性支持
  - [x] CDN 内容分发网络（Content Delivery Network）【和拆包存在冲突】
- [x] 项目集成自定义 cli 解决项目重复复制代码问题
- [x] 集成 mockjs
- [x] 读取 makdown 文档，编写组件说明文档
- [x] maptalks + threejs demo 示例
- [x] 使用 postcss-pxtorem、autoprefixer 插件 px 自动转换为 rem 和自动添加浏览器兼容前缀
- [x] Monorepo
- [x] 基于 sh 脚本对项目进行一键部署
- [x] 图形编辑器
  - [x] 流程图
- [x] 国际化
- [ ] npm 私服搭建
- [ ] npm 私服发布
- [x] 自动化部署
- [x] 使用 commitizen 规范 git 提交
- [x] husky git hooks
- [x] 错误日志捕获
- [x] utils 工具类封装
  - [x] xlsxUtils excel一级~多级导入、导出工具类封装
  - [x] request axios 公共请求封装
  - [x] storage localStorage、sessionStorage 缓存工具类封装 
  - [x] download 下载工具类封装 
  - [x] waterMark 水印工具类封装 
- [x] 自定义UI组件 

## 技术栈

- [TypeScript](https://www.tslang.cn/docs/handbook/basic-types.html)
- [Vue3](https://cn.vuejs.org/guide/introduction.html)
- [pinia](https://pinia.web3doc.top/introduction.html)
- [axios](https://github.com/axios/axios)
- [pnpm](https://www.pnpm.cn/installation)
- [vite](https://vitejs.cn/guide/#scaffolding-your-first-vite-project)
- [vitest](https://cn.vitest.dev/guide/)
- [cz-git](https://cz-git.qbb.sh/zh/)
- [vue3+setup+ts](https://juejin.cn/post/7158331832512020511#heading-9)