# 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 #### 工作台  #### 分析页  ### 复制文本  ### 列表页  ### 表单页 #### 基础表单  #### 分步表单  #### 高级表单  ### 二维码  ### 个人中心  ### 个人设置  ### 拖拽组件  ### 菜单管理  ### 角色管理