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

b5c66052660110a5f0d4885e9424ca8e.jpeg

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

如果觉得我写得还行的话,请献上你宝贵的一赞👍,这将是我持续写作的动力!感谢大家啦。

1

971e43ab3de97295f6ebe48694b696ac.png

vue3-admin 开源地址

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

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

当然,也希望感兴趣的朋友可以找找其中的问题,提一些 pr 或者 issue,让这个开源项目能够减少问题并且保持进步。

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

  • in GitHub : https://github.com/newbee-ltd/vue3-admin

  • in Gitee : https://gitee.com/newbee-ltd/vue3-admin

2

6e3f1d457c88aa47553304a9b2144d71.png

vue3-admin 预览地址

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

由于服务器的带宽并不是非常大,担心大家直接把服务器挤爆了,希望大家不要一起访问,哈哈哈哈。

3

7342162521c293fda55886ce04121837.png

解决方案测试过程和测试结果

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

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

d87d70ffe8e12327052dec9edf1829d1.png

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

25ef674d041117c01cfead7a1d11fedf.png

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

4

9d53549bf10c07fc3543da4d91678d6f.png

测试过程中哭笑不得的一件事

也有一个很气的事情,这个事情我之前提过很多次,真的是很苦笑不得。

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

41a7bd09dde062e54c3462e33c73817c.png

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

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

8b601dda6c4fd50c978b42436522afbb.png

5

e9beecd7517e7433eed823841c27e38f.png

主要技术栈

上面的方法虽然起到了一定的作用,但是依然无法很好去。

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

  • Vue 3.0

  • Element-Plus

  • Vite 2.0

  • Vue-Router

  • Echars 5.0

  • Axios

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

bdd31211d1b5c790b0c72367eedc4dbd.png

6

bcc7cc6c92c2ef20cc0ec86f8240dc2c.png

vue3-admin项目预览图

预览图如下:

  • 登录页

6880f6f7b0b9c8bfed31f5d3937d7fea.png

  • 轮播图管理

8afd073dea6649f363b4f7037d360221.png

  • 分类管理

bf27ea58391d1413bc9a77f7045b7bb4.png

  • 商品列表

7cf49267e7650f183d1d2af6c3fb1c46.png

  • 商品编辑

fa1df82c1e01186ee35fd909e51849e5.png

  • 订单管理

41ad0cb9205157e3f8494ad4a3d32e06.png

  • 订单详情

8784afe192f5cef0cda401d8ff0db949.png

7

17e1519c9341e8910a208262a395ac82.png

代码贡献

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

当然我也希望大家都能够为该项目做一下代码贡献,步骤如下:

  • fork 代码

  • 创建自己的分支

  • commit 并 push 修改的代码到你fork的代码仓库

  • 提交 pr

b045af4de485fce54f6ed60e9aee223a.jpeg

8

e79fc8872154004811882fb3ee8e95ab.png

总结

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

感谢大家的查看,然后也希望大家动动发财的小手,帮忙点个 Star或者分享出去让更多地人可以看到这个项目,谢谢大家的支持啦。

1cc1e24391300ba7f341c406f5b44fa1.gif

● 一个基于 Vue3 的开源项目,3个月时间 star 终于破千!

● newbee-mall 开源商城新计划:秒杀功能、优惠券、对接支付宝

● 开源啦!一个基于 Vue 3 + Vant 3 的商城项目

● 程序员的副业:我靠写作赚到的第一笔收入

● Vue+Spring Boot 前后端分离的商城项目开源啦!

● 「2020年中总结」这半年我又做了哪些副业?

● 我在地铁上写了一个开源商城项目

● 开源项目在闲鱼、b 站上被倒卖?这是什么骚操作

● 年终总结-2019年,我的副业元年

● 程序员,你怎么这么忙

“程序员的小故事”公众号中除注明转载/出处外,皆为作者原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

b10171b84e4fb862777bcdd70bbb25ae.gif

2de607ea7f2a70c0c8437dd0e0366991.jpeg

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员十三

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值