GeekQiaQia / vue3.0-template-admin

本项目基于vue3+ElementPlus+Typescript+Vite搭建一套通用的后台管理模板;并基于常见业务场景,抽象出常见功能组件;包括动态菜单,菜单权限、登录、主题切换、国际化、个人中心、表单页、列表页、复制文本、二维码分享等等

Home Page:https://geekqiaqia.github.io/vue3.0-template-admin/#/login?redirect=/home

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue3.0-template-admin

Vue3.0: vue
Vite ⚡: npm package
Element-plus:

⭐️ Show your support

Give a ⭐️ if this project helped you!

已完成功能 | The functionality is complete

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

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

  • 可拖拽弹窗
  • 导航模式切换
  • 内容区域控制

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

工程化 | Project Tool

浏览器支持

推荐使用webkit内核浏览器

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

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

合作优质项目 | Partner project

🤝 贡献 | 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

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

Then generate your new project:

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

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

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

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

快照 | screen shots

登录注册

image.png

主题风格

image.png

国际化

image.png

全屏功能

image.png

tab 标签页

image.png

首页

image.png

Dashboard

工作台

image.png

分析页

image.png

复制文本

image.png

列表页

image.png

表单页

基础表单

image.png

分步表单

image.png

高级表单

image.png

二维码

image.png

个人中心

image.png

个人设置

image.png

拖拽组件

image.png

菜单管理

image.png

角色管理

image.png

About

本项目基于vue3+ElementPlus+Typescript+Vite搭建一套通用的后台管理模板;并基于常见业务场景,抽象出常见功能组件;包括动态菜单,菜单权限、登录、主题切换、国际化、个人中心、表单页、列表页、复制文本、二维码分享等等

https://geekqiaqia.github.io/vue3.0-template-admin/#/login?redirect=/home

License:MIT License


Languages

Language:Vue 79.9%Language:TypeScript 14.6%Language:SCSS 2.7%Language:JavaScript 2.6%Language:HTML 0.1%Language:Shell 0.1%Language:CSS 0.0%