Vue3教程：Vue 3 + Element Plus + Vite 2 的后台管理系统开源啦
之前发布过一篇文章《Vue3教程：开发一个 Vue 3 + element-plus 的后台管理系统》，文中提到会开发并开源一个 Vue 3 + Element Plus 的项目供大家练手和学习，随后也一直有收到留言和反馈，问我什么时候开源之类的问题，今天终于可以通知大家，完成啦！????????开源啦！????????如果觉得我写得还行的话，请献上你宝贵的一赞????，这将是我持续写作的动力！感
之前发布过一篇文章《Vue3教程：开发一个 Vue 3 + element-plus 的后台管理系统》，文中提到会开发并开源一个 Vue 3 + Element Plus 的项目供大家练手和学习，随后也一直有收到留言和反馈，问我什么时候开源之类的问题，今天终于可以通知大家，完成啦！🎉🎉开源啦！🎉🎉
如果觉得我写得还行的话，请献上你宝贵的一赞👍，这将是我持续写作的动力！感谢大家啦。
vue3-admin 开源地址
所有的代码、文件全部都开源到 GitHub 仓库中，前后端代码全部都在仓库里。
并没有任何藏着掖着的行为，包括后端 API 接口的代码也全部开源，不会说缺少哪个页面或者某个重要功能，这种事情是不存在的，大家先看看文章和预览图，觉得不错的朋友可以继续了解一下这个项目。
当然，也希望感兴趣的朋友可以找找其中的问题，提一些 pr 或者 issue，让这个开源项目能够减少问题并且保持进步。
vue3-admin 在 GitHub 和国内的码云都创建了代码仓库，如果有人访问 GitHub 比较慢的话，建议在 Gitee 上查看该项目，两个仓库会保持同步更新。
vue3-admin 预览地址
本项目在一周之前已经部署到线上环境，在开源仓库里可以看到访问地址。
由于服务器的带宽并不是非常大，担心大家直接把服务器挤爆了，希望大家不要一起访问，哈哈哈哈。
测试过程和测试结果，感谢大家参与测试
测试过程大概大半个月吧，总共有三轮测试，前两轮都是自测，改了不少问题。后面是发了一篇文章介绍了这个项目，并且把项目的预览地址和测试账号密码公布出来，让大家一起点一点页面、测一测功能，还是有不少人参与到这个项目的测试环节的，在这里感谢一下大家啦。
下图是某个时间段内生成的登录token记录，就是每次有人登录系统都会生成这样一条记录，数据量还是挺大的。
汇总了网站上线之初（也就是上周一），到上周末的 token 产生数据情况，如下图所示：
通过这个数据可以大致的推算出一些结果，每天大概有 200 ~ 300 人登录并测试了 vue3-admin 这个项目。不过，反馈过来的问题不是很多，bug 也没有，可能大家测试的也不是很深入，后续大家实际的运行代码和详细的体验后，应该会有更多问题出现，期待大家的反馈。
测试过程中哭笑不得的一件事
也有一个很气的事情，这个事情我之前提过很多次，真的是很哭笑不得。
我做了不少开源项目，这些项目也都会把预览地址放出来给大家用，让大家可以提前体验功能，我这个想法是很为大家考虑的，但是总有些人比较怪，做一些怪事情。最经典的一件事情就是删数据，本来满满登登的测试数据，全给我删咯，比如这次 vue3-admin 预览网站中的轮播图数据、分类数据，刚把预览地址发出去半天时间，数据就没了，页面效果如下图所示：
然后我又去恢复，然后商品数据、订单数据、用户数据为什么没被删呢？因为这些模块里我没放删除按钮，但是第一页的订单数据也给我关闭了、第一页的商品数据也给我下架了、第一页的用户数据也给我禁用了，我后面时不时的去恢复一下这些数据。
这个事情呢，说实在的，从我 2017 年做第一个开源项目就存在，但是也没法解决，不放预览地址吧，影响大家的体验，但是放上去吧，总有些二货删掉全部数据或者改测试账号的密码让别人没法测。这里呢，还是希望各位自觉一点，可以测试删除功能，但是你别全删了，或者说你删完之后加几条数据也行啊。
主要技术栈
vue3-admin 项目的技术栈选择如下：
主要技术栈为 Vue 3.0 和 Element Plus，Vue 3.0 正式版本已上线半年有余，之后又看到 @iamkun 大佬发了一篇文章《🎉 Element UI for Vue 3.0 来了！》，文章中有提到 Element Plus 正式发版，就想着用它来重构之前写的一个后台管理系统，然后又尝试了一下 Vite 2.0，算是尝鲜吧。
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 开源地址：
除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。
前往低代码交流专区
更多推荐
12
0- 0
已为社区贡献6条内容
所有评论(0)