🎉🎉Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦🎉🎉

quote

以前发布过一篇文章《Vue3教程:开发一个 Vue 3 + element-plus 的后台管理系统》,文中提到会开发并开源一个 Vue 3 + Element Plus 的项目供你们练手和学习,随后也一直有收到留言和反馈,问我何时开源之类的问题,今天终于能够通知你们,完成啦!🎉🎉开源啦!🎉🎉html

若是以为我写得还行的话,请献上你宝贵的一赞👍,这将是我持续写做的动力!感谢你们啦。vue

vue3-admin 开源地址

全部的代码、文件所有都开源到 GitHub 仓库中,先后端代码所有都在仓库里。ios

并无任何藏着掖着的行为,包括后端 API 接口的代码也所有开源,不会说缺乏哪一个页面或者某个重要功能,这种事情是不存在的,你们先看看文章和预览图,以为不错的朋友能够继续了解一下这个项目。git

固然,也但愿感兴趣的朋友能够找找其中的问题,提一些 pr 或者 issue,让这个开源项目可以减小问题而且保持进步。github

vue3-admin 在 GitHub 和国内的码云都建立了代码仓库,若是有人访问 GitHub 比较慢的话,建议在 Gitee 上查看该项目,两个仓库会保持同步更新。web

vue3-admin 预览地址

本项目在一周以前已经部署到线上环境,在开源仓库里能够看到访问地址。apache

因为服务器的带宽并非很是大,担忧你们直接把服务器挤爆了,但愿你们不要一块儿访问,哈哈哈哈。axios

测试过程和测试结果,感谢你们参与测试

测试过程大概大半个月吧,总共有三轮测试,前两轮都是自测,改了很多问题。后面是发了一篇文章介绍了这个项目,而且把项目的预览地址和测试帐号密码公布出来,让你们一块儿点一点页面、测一测功能,仍是有很多人参与到这个项目的测试环节的,在这里感谢一下你们啦。后端

下图是某个时间段内生成的登陆token记录,就是每次有人登陆系统都会生成这样一条记录,数据量仍是挺大的。服务器

image-20210324230137944

汇总了网站上线之初(也就是上周一),到上周末的 token 产生数据状况,以下图所示:

image-20210324230009526

经过这个数据能够大体的推算出一些结果,天天大概有 200 ~ 300 人登陆并测试了 vue3-admin 这个项目。不过,反馈过来的问题不是不少,bug 也没有,可能你们测试的也不是很深刻,后续你们实际的运行代码和详细的体验后,应该会有更多问题出现,期待你们的反馈。

测试过程当中啼笑皆非的一件事

也有一个很气的事情,这个事情我以前提过不少次,真的是很啼笑皆非。

我作了很多开源项目,这些项目也都会把预览地址放出来给你们用,让你们能够提早体验功能,我这个想法是很为你们考虑的,可是总有些人比较怪,作一些怪事情。最经典的一件事情就是删数据,原本满满登登的测试数据,全给我删咯,好比此次 vue3-admin 预览网站中的轮播图数据、分类数据,刚把预览地址发出去半天时间,数据就没了,页面效果以下图所示:

image-20210324223713099

而后我又去恢复,而后商品数据、订单数据、用户数据为何没被删呢?由于这些模块里我没放删除按钮,可是第一页的订单数据也给我关闭了、第一页的商品数据也给我下架了、第一页的用户数据也给我禁用了,我后面时不时的去恢复一下这些数据。

这个事情呢,说实在的,从我 2017 年作第一个开源项目就存在,可是也无法解决,不放预览地址吧,影响你们的体验,可是放上去吧,总有些二货删掉所有数据或者改测试帐号的密码让别人无法测。这里呢,仍是但愿各位自觉一点,能够测试删除功能,可是你别全删了,或者说你删完以后加几条数据也行啊。

image-20210324224653618

主要技术栈

vue3-admin 项目的技术栈选择以下:

主要技术栈为 Vue 3.0 和 Element Plus,Vue 3.0 正式版本已上线半年有余,以后又看到 @iamkun 大佬发了一篇文章《🎉 Element UI for Vue 3.0 来了!》,文章中有提到 Element Plus 正式发版,就想着用它来重构以前写的一个后台管理系统,而后又尝试了一下 Vite 2.0,算是尝鲜吧。

vue3-elementplus

vue3-admin项目预览图

预览图以下:

  • 登陆页

登陆页面

  • 轮播图管理

轮播图管理

  • 分类管理

分类管理

  • 商品列表

商品管理

  • 商品编辑

商品编辑

  • 订单管理

订单管理

  • 订单详情

订单详情

代码贡献

固然,目前是 vue3-admin 的第一个版本,虽然已经测试过几轮,不排除还会有一些问题存在,也但愿你们能够提出一些优化建议,能够提交issue,也能够给我留言或者到交流群里直接艾特我。

固然我也但愿你们都可以为该项目作一下代码贡献,步骤以下:

  • fork 代码
  • 建立本身的分支
  • commit 并 push 修改的代码到你fork的代码仓库
  • 提交 pr

总结

因为时间的关系也没有时间详细的讲解开发过程和一些注意事项,只是经过这篇简简单单的文章告诉你们,Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 的后台管理系统开发出来了,在充分的测试以后也开源了出来供你们学习和练习,过程当中若是有任何问题,也但愿你们给我反馈,我会尽快的修复掉这些问题。

感谢你们的查看,而后也但愿你们动动发财的小手,帮忙点个 Star或者分享出去让更多地人能够看到这个项目,谢谢你们的支持啦。

vue3-admin 开源地址:

除注明转载/出处外,皆为做者原创,欢迎转载,但未经做者赞成必须保留此段声明,且在文章页面明显位置给出原文连接,不然保留追究法律责任的权利。