# vue3.0-template-admin

<p align="center">
Vue3.0:
<a href="https://www.npmjs.com/package/vue/v/next">
    <img src="https://img.shields.io/npm/v/vue/next.svg" alt="vue">
  </a>
  </br>
  Vite ⚡:
    <a href="https://npmjs.com/package/vite"><img src="https://img.shields.io/npm/v/vite.svg" alt="npm package"></a>
  </br>
Element-plus:
<a href="https://www.npmjs.org/package/element-plus">
<img src="https://img.shields.io/npm/v/element-plus.svg">
</a>

</p>
- 💪 Vue 3.0 Composition API
- 🔥 Written in TypeScript
- 🏠 预览 [vue3.0-template-admin](https://geekqiaqia.github.io/vue3.0-template-admin/#/login?redirect=/home)

## ⭐️ Show your support

Give a ⭐️ if this project helped you!

## 已完成功能 | The functionality is complete

- [x] Element Plus
- [x] N+1 多级菜单
- [x] Dashboard
- [x] 表格
- [x] router Tab 选项卡
- [x] 表单
- [x] 图表 :antv or echart
- [x] 二维码生成
- [x] 导入导出 Excel
- [x] 导出 Zip 文件
- [x] 拖拽组件
- [x] 富文本编辑器
- [x] markdown 编辑器
- [x] 个人页
- [x] 登录/注册页
- [x] 404 / 403
- [x] 菜单管理
- [x] 角色管理
- [x] 自定义图标
- [x] 图片拖拽/裁剪
- [x] 支持切换主题色:一键换肤
- [x] 指令权限：v-permisson /全局方法：$permission (参考 tableList.vue)
- [x] 国际化
- [x] 项目看板

## 正在完成功能 | The functionality is being completed

- [x] 可拖拽弹窗
- [x] 导航模式切换
- [x] 内容区域控制

## 使用到的插件/库 | Plugin or lib

- **eslint-plugin-vue** [eslint-plugin-vue](https://eslint.vuejs.org/user-guide/#faq)
- **axios** 强大的前端请求库
- **fues.js** [fues.js Fuzzy Search 前端模糊搜索](https://github.com/krisk/Fuse)
- **echart** [echart 数据可视化](http://echarts.apache.org/zh/index.html)
- **antv** [antv 蚂蚁数据可视化](https://antv.vision/zh)
- **xlsx** [xlsx SheetJS ](https://www.npmjs.com/package/xlsx)
- **jszip** [jszip 优秀的前端压缩库 ](https://github.com/Stuk/jszip)
- **mockjs** [mockjs 模拟和交互数据](http://mockjs.com/)
- **wangeditor** [wangeditor 富文本编辑器](https://www.wangeditor.com/doc/)
- **fullcalendar** [fullcalendar 丰富的日历插件](https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/vue3-typescript)

## 工程化 | Project Tool

- Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
- 代码规范：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
- 提交规范：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)

## 浏览器支持

推荐使用`webkit`内核浏览器

支持现代浏览器, 不支持 IE

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |

## 合作优质项目 | Partner project

- [h5-Dooring - H5-Dooring 是一款功能强大，专业可靠的 H5 可视化页面配置解决方案](https://github.com/MrXujiang/h5-Dooring)
- [Blink - 一款自定义的生成故障艺术动画的组件库](https://github.com/MrXujiang/blink)
- [frontend-developer-roadmap | 一个能提高开发者工作效率的前端 js 库汇总](https://github.com/MrXujiang/frontend-developer-roadmap)

## 🤝 贡献 | Contributing

欢迎参与贡献，提出问题、新功能合并请求等！

最新的贡献情况可以参阅 GitHub 提供的[contributors](https://github.com/GeekQiaQia/vue3.0-template-admin/graphs/contributors)页面

### ❓ 问题 | Issue

Contributions, issues and feature requests are welcome!.
<br />Feel free to check [issues page](https://github.com/GeekQiaQia/vue3.0-template-admin/issues).

欢迎提 Issues

## 快速启动 | Quick Start

```
# 克隆项目
# cnpmjs
git clone https://github.com.cnpmjs.org/GeekQiaQia/vue3.0-template-admin.git

# or
git clone https://github.com/GeekQiaQia/vue3.0-template-admin.git


# 进入项目目录
cd vue3.0-template-admin

# 安装依赖 （推荐yarn）
npm install  / yarn

# 启动服务
npm run dev  / yarn dev

# 打包
npm run build  / yarn build

# 本地预览打包后的dist文件
npm run preview / yarn preview



```

## 同步代码 | synchronizing code

```
# add upstream
git remote add upstream https://github.com/GeekQiaQia/vue3.0-template-admin

# 抓取源仓库修改 master分支
git fetch upstream main

# 切换分支
git checkout main

# 合并远程分支
git merge upstream/main
```

## git 提交 | git commit

     git add *  // add everything

     git status  // check status

     git cz  // commit change

     git push // push stage commit

    // 如果cz 命令无法找到，全局安全commitize
     npm install -g commitizen

## 持续升级 | Continuous upgrades

- [x] 重构 request.ts 请求，使其灵活可配置化；
- [x] 使用 AES 加密方式，对密码进行安全加密；
- [x] 完成换肤切换功能，使用 ElementPlus theme-chalk 实现换肤
- [x] 重构登录注册页面，完善忘记密码交互以及必填字段校验
- [x] 设计角色管理，选择不同的角色，授权不同的菜单
- [x] 根据不同的登录用户角色，展示不同的菜单
- [x] 【enhance】 vite 不同环境变量配置

## 技术反馈和交流群 | Technical feedback and communication

<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d41b5fec542444b4a28c00135ce27d42~tplv-k3u1fbpfcp-watermark.image" width="180px" />

<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4831228f92b4b9e852b2d97eba8b25c~tplv-k3u1fbpfcp-watermark.image?" width="180px" />

## 赞助 | Sponsored

开源不易, 有了您的赞助, 我们会做的更好~

<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04022bcd6f99449ba0f065f470d19458~tplv-k3u1fbpfcp-watermark.image" width="180px" />

## 快照 | screen shots

### 登录注册

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/920c97e69ad947ffbada5f030556327e~tplv-k3u1fbpfcp-watermark.image)

### 主题风格

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd27dbaba4f94db88a98468640f3ca00~tplv-k3u1fbpfcp-watermark.image)

### 国际化

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/024bc719b2484b8780210277379431cc~tplv-k3u1fbpfcp-watermark.image?)

### 全屏功能

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17ee79df049c4536a73177e4ae086650~tplv-k3u1fbpfcp-watermark.image)

### tab 标签页

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35d69fce489445f58cfa1a4f1962553b~tplv-k3u1fbpfcp-watermark.image)

### 首页

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfe5cd938e134a118fc6e9294d0caa30~tplv-k3u1fbpfcp-watermark.image?)

### Dashboard

#### 工作台

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6586b8a2a6d42e9844519217f277b74~tplv-k3u1fbpfcp-watermark.image)

#### 分析页

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6bf206ec2c4f48f5bc6569e24a33bdec~tplv-k3u1fbpfcp-watermark.image?)

### 复制文本

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7272b219e496438898a3fb7d81859087~tplv-k3u1fbpfcp-watermark.image)

### 列表页

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bacbafba94094ea8a0e8659b0bec382c~tplv-k3u1fbpfcp-watermark.image)

### 表单页

#### 基础表单

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6db9c82b879d4b10bda9507a334698fd~tplv-k3u1fbpfcp-watermark.image)

#### 分步表单

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42ae54a0b94044f8aa9c844d201da213~tplv-k3u1fbpfcp-watermark.image)

#### 高级表单

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b255c09f13e4b2cbab2b8d6696d0cb2~tplv-k3u1fbpfcp-watermark.image)

### 二维码

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b06fc12a50b047699c6fb3c556af05a3~tplv-k3u1fbpfcp-watermark.image)

### 个人中心

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad571e4fdb9146de9348f10b1651cb57~tplv-k3u1fbpfcp-watermark.image)

### 个人设置

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c361ca504b1a4396929bd33730bdb350~tplv-k3u1fbpfcp-watermark.image)

<!-- ### 主题设置

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc192a56d9104cd3b8404b37c024ac76~tplv-k3u1fbpfcp-watermark.image) -->

### 拖拽组件

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fa6e9b7f60a440196b6b7b8586dc64f~tplv-k3u1fbpfcp-watermark.image)

### 菜单管理

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8dcdc968093348c8a2cfe2f6d17c2c59~tplv-k3u1fbpfcp-watermark.image)

### 角色管理

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d3e75f06808445ba3aab88186633d4e~tplv-k3u1fbpfcp-watermark.image)