vue3.0-template-admin

Vue3.0:
Vite ⚡:
Element-plus:

• 💪 Vue 3.0 Composition API
• 🔥 Written in TypeScript
• 🏠 预览 vue3.0-template-admin

⭐️ 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-vueeslint-plugin-vue
• axios强大的前端请求库
• fues.jsfues.js Fuzzy Search 前端模糊搜索
• echartechart 数据可视化
• antvantv 蚂蚁数据可视化
• xlsxxlsx SheetJS
• jszipjszip 优秀的前端压缩库
• mockjsmockjs 模拟和交互数据
• wangeditorwangeditor 富文本编辑器
• fullcalendarfullcalendar 丰富的日历插件
• driverJS轻量级 driverJS 新用户引导

工程化 | Project Tool

• Git Hook 工具：husky+lint-staged
• 代码规范：EditorConfig+Prettier+ESLint+Airbnb JavaScript Style Guide
• 提交规范：Commitizen+Commitlint
• 包管理器：only-allow

浏览器支持

推荐使用webkit内核浏览器

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

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

合作优质项目 | Partner project

• h5-Dooring - H5-Dooring 是一款功能强大，专业可靠的 H5 可视化页面配置解决方案
• Blink - 一款自定义的生成故障艺术动画的组件库
• frontend-developer-roadmap | 一个能提高开发者工作效率的前端 js 库汇总
• generator-admin-cli | vue3.0-admin-cli 中后台脚手架

🤝 贡献 | Contributing

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

最新的贡献情况可以参阅 GitHub 提供的contributors页面

❓ 问题 | Issue

Contributions, issues and feature requests are welcome!.
Feel free to check issues page.

欢迎提 Issues

脚手架 | scaffolding

您也可以使用脚手架搭建最简洁的启动项目

You can also use scaffolding to build the simplest startup project

• generator-admin-cli | vue3.0-admin-cli 中后台脚手架

npm install -g yonpm install -g generator-vue3-admin-cli

Then generate your new project:

yo vue3-admin-cli

快速启动 | Quick Start

# 克隆项目# cnpmjsgit clone https://github.com.cnpmjs.org/GeekQiaQia/vue3.0-template-admin.git# orgit 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 upstreamgit 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

工作台

分析页

复制文本

列表页

表单页

基础表单

分步表单

高级表单

二维码

个人中心

个人设置

拖拽组件

菜单管理

角色管理