# vue3.0-template-admin
Vue3.0:
Vite ⚡:
Element-plus:
- 💪 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)
- **driverJS** [轻量级 driverJS 新用户引导](https://kamranahmed.info/driver.js/)
## 工程化 | 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/#/)
- 包管理器:[only-allow](https://www.npmjs.com/package/only-allow)
## 浏览器支持
推荐使用`webkit`内核浏览器
支持现代浏览器, 不支持 IE
| [

](http://godban.github.io/browsers-support-badges/)IE | [

](http://godban.github.io/browsers-support-badges/)Edge | [

](http://godban.github.io/browsers-support-badges/)Firefox | [

](http://godban.github.io/browsers-support-badges/)Chrome | [

](http://godban.github.io/browsers-support-badges/)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)
- [generator-admin-cli | vue3.0-admin-cli 中后台脚手架](https://github.com/GeekQiaQia/generator-admin-cli)
## 🤝 贡献 | Contributing
欢迎参与贡献,提出问题、新功能合并请求等!
最新的贡献情况可以参阅 GitHub 提供的[contributors](https://github.com/GeekQiaQia/vue3.0-template-admin/graphs/contributors)页面
### ❓ 问题 | Issue
Contributions, issues and feature requests are welcome!.
Feel free to check [issues page](https://github.com/GeekQiaQia/vue3.0-template-admin/issues).
欢迎提 Issues
## 脚手架 | scaffolding
您也可以使用脚手架搭建最简洁的启动项目
You can also use scaffolding to build the simplest startup project
- [generator-admin-cli | vue3.0-admin-cli 中后台脚手架](https://github.com/GeekQiaQia/generator-admin-cli)
```bash
npm install -g yo
npm install -g generator-vue3-admin-cli
```
Then generate your new project:
```bash
yo vue3-admin-cli
```
## 快速启动 | 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

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

## 快照 | screen shots
### 登录注册

### 主题风格

### 国际化

### 全屏功能

### tab 标签页

### 首页

### Dashboard
#### 工作台

#### 分析页

### 复制文本

### 列表页

### 表单页
#### 基础表单

#### 分步表单

#### 高级表单

### 二维码

### 个人中心

### 个人设置

### 拖拽组件

### 菜单管理

### 角色管理
