geekqiaqia / vue3.0-template-admin Goto Github PK

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

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

License: MIT License

JavaScript 2.64% HTML 0.08% Vue 79.91% TypeScript 14.62% SCSS 2.68% CSS 0.01% Shell 0.05%

vue3-typescript vue3 element-plus vue-next vite vite2 vscode vscode-command-palette volar vetur

vue3.0-template-admin's Introduction

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

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

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

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

eslint-plugin-vue eslint-plugin-vue
axios 强大的前端请求库
fues.js fues.js Fuzzy Search 前端模糊搜索
echart echart 数据可视化
antv antv 蚂蚁数据可视化
xlsx xlsx SheetJS
jszip jszip 优秀的前端压缩库
mockjs mockjs 模拟和交互数据
wangeditor wangeditor 富文本编辑器
fullcalendar fullcalendar 丰富的日历插件
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

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

登录注册

主题风格

国际化

全屏功能

tab 标签页

首页

Dashboard

工作台

分析页

复制文本

列表页

表单页

基础表单

分步表单

高级表单

二维码

个人中心

个人设置

拖拽组件

菜单管理

角色管理

vue3.0-template-admin's People

Contributors

Stargazers

Watchers

Forkers

alongmen zhoums vnues rotate-life kennana levi-li-yi long36708 zly1988203 zpenghao thinkerofjs jackywq hansaibo shamworld chenixhn whiskstarhs powerhyh seaton-git lsf1192354203 sevenhuan nicoletan8283 xiekecheng gtiger666 itrenshuaitao yuanyongiter albatross-ttt yangbinxin xqyi xuxuxusong leamiko wuchunfu zsu13579 yyyangte zhonghaozhang mygityanxh master-zhang-web zhujiahao1 mrxujiang coollaughing666 resources-container merzoo zhaobinliz msojocs limingzhiguang jayanthqaz tlx6550 returnvwp olufemioyedepo withoutmelv shangzhipei qybksbb yidaidashen annaijin1 cleverdominica brantzzu cocosvsn swpc zhaixiankui lizhengpeng sn790519 chenchuyin wecuit gzg1500521074 yangxingpping jasoncl2015 hubbard-liu titan-suzaku chianz lqdreaming ggbbeyou ccz-cc sanmuw wweicattle johnzhaoxiaohu mikelpan crush394 wangjake2019 coder-xue we1zhoulee michael-xgl kevin262516 wfw2046 nieaijun99 tcot yangxinsamsara dmcdoudou frontendniubility yll1024335892 gegelulu snowman828 chierlong dcriori xinjuren10 shouzijiang sweetfr linxin1995 nscosine nyhxiaoning liu-miao-miao zhouzhou-ui chenyuncai

vue3.0-template-admin's Issues

【task认领】国际化开发

中英文、或者多语言国际化切换是很场景的需求场景

【task认领】监控页场景开发

监控页场景，常用于监控平台，或者告警系统

全屏不兼容报错

Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?

编译时报错，属性不存在

【task认领】模板脚手架 cli开发

利用脚手架plop等的优势，一键创建标准的最简洁的项目模板环境

task:前端导出text Img pdf等文件，并压缩为zip类型下载的场景开发

前端导出text Img pdf等文件，并压缩为zip类型下载的场景开发，这是一种在在后台管理系统中比较常见的场景

请问作者，预览页面的用户名密码是什么？

https://geekqiaqia.github.io/vue3.0-template-admin

请问作者，预览页面的用户名密码是什么？

在文档中没看到默认的用户名密码，注册用户会报 405。

fix(vite-config):[email protected]

thanks for pr :fix(config): vite

【refactor】重构 dashboard

[enhance] Can I have a skin change

Can the skin function be realized ?

【bug】预览失败，无法「登录」+「获取验证码」

情景：示例账户「[email protected] + 123456」登录失败，转用户注册，点击「获取验证码」产生异常。
异常返回信息：

task:excel：将可选内容按需导出到excel的场景

常用于后台管理系统，列表统计信息，将可选内容按需导出到excel的场景

【task认领】标签增加右键关闭功能

可以包含如下功能：右键或者hover关闭左侧、关闭右侧、关闭其他等等

【持续推进】更新日志

【task :enhance】利用elementPlus bootstrap 处理响应式场景

【bugfix】修改主题样式 theme-chalk

Q:无法修改样式主题，
A:更新最新的umpak，但是修改后表单样式被修改

task:权限指令开发，v-permission 局部权限实现场景

task:前端页面根据Form表单数据，将html模板页面转为pdf，并支持预览下载场景开发

将html模板页面转为pdf，并支持预览下载场景开发，通常用于后台管理系统中，将Form表单编辑的数据，填入html模板页面，并将html模板转换为pdf进行留底保存，同时支持预览校验的场景

【升级】升级最新版本elementPlus

elementPlus 1.2版本相比1.1版本有一些破坏性的升级,ex:elementPlus/icon

线上预览打不开

task:可拖拽弹窗场景开发

常用于弹窗表单等编辑时，为了不遮挡弹窗后面的内容，需要拖拽到自定义位置进行编辑操作等需求场景

无法启动

task:个人中心记事日历开发：elCalendar fullCalendar

记事日历：通常用户记录个人行程会议安排等等记事功能场景

【bug】AES密码加密模块，线上部署报错

【bugfix】组件重复注册

控制台输出：

onMounted personalCenter.vue personalCenter.vue:158 
onActivated personalCenter.vue personalCenter.vue:154
onMounted personalCenter.vue personalCenter.vue:158
onActivated personalCenter.vue personalCenter.vue:154
onMounted personalCenter.vue personalCenter.vue:158
onActivated personalCenter.vue

dom截图:

【task认领】： Layout 进行组件化，类似于ant layout的组件化封装

Layout 进行组件化，让任何脚手架使用 Layout 的能力

【enhance】vite 配置分包优化

task:多角色管理与菜单权限设计

后台管理常见场景：多角色管理，不同角色分配不同的菜单权限，根据不同的登录用户角色，展示不同的菜单；

【bug】vite 最新版本2.8.3 elementPlus v2.0.2 开发环境加载缓慢

task:项目看板开发，常见于项目管理后台查看管理任务进度场景

常见于项目管理后台查看管理任务进度场景：功能类似于github project ,动态添加子任务，和看板

【task认领】导航模式切换

导航模式切换场景，通常用于根据个人喜好、设置页面主模块的布局方式场景

注册失败，返回405

Can we get an english version?

Hi GeekQiaQia,

Great job for coming up with this template but can we get an English version?

[hooks]: mac env ...hook was ignored because it's not set as executable.

hooks 在 windows 上是能够失常运行的，起初换成 mac 之后就不行了，提交时报错：

hint: The 'hooks/commit-msg' hook was ignored because it's not set as executable.

起因是 hooks 脚本默认为不可执行，所以须要将它设为可执行

chmod 700 .husky/*

【bugfix】移动端模式，无法打开左侧菜单

watchEffect的使用

【bug】[email protected] render build error

vite 官方bug,待测试修复

【task认领】elementPlus 组件升级

elementPlus 1.2版本相比1.1版本有一些破坏性的升级,ex:elementPlus/icon

task:支持切换主题色:一键换肤开发

换肤或者主题色、暗黑切换模式等场景是比较场景和流行的需求场景

task:backtop 回到顶部，返回页面顶部的操作场景

实现一键返回顶部，常用于下拉内容过长的场景；

【task】支持国际化开发

支持国际化

[enhancement]:重新封装可配置化request

【bugfix】路由meta设置hidden属性，无法进入tab渲染

【认领】：当窗口大小为 768<md <=992px 时，自动关闭左侧侧边栏

当窗口大小为 768<md <=992px 时，自动关闭左侧侧边栏

task:内容区域控制场景开发

内容区域控制场景开发，通常用于简洁开发模式、用于设置页，用户控制是否显示顶栏、菜单等区域模块

导航动画

你们导航中动画为什么会闪动一下，不平滑？

【enhance】vite 不同环境配置变量配置

vite config 环境变量配置

<keep-alive>缓存的路由没有被真正清除掉

缓存的路由，在修改页面数据后，在顶部tabs中关闭缓存路由后，重新从左侧打开修改数据了的路由组件，数据依然存在。

【fixbug】el-tooltip:provide a valid default slot

当任何一个角色状态为0（锁定）时，页面排版错乱，控制台报错。

Uncaught (in promise) ElementPlusError: [[ElTooltip]] you need to provide a valid default slot.

将判断条件改为非零时，锁定状态显示正常。
所以，使用非零标记可以解决这个问题。

但是，我没有找出这个0状态问题在哪里。

【enhance】 vite 不同环境变量配置

vite 不同环境变量配置

【task 认领】拖拽组件，任务看板重构

类似于github 看板，包含 todo inprogress review done 等状态