Vue3 来了，Vue3 开源商城项目重构计划正式启动！

时间 2020-10-20

标签 vue git github app post 学习测试优化网站设计栏目快乐工作繁體版

原文原文链接

我打算用 Vue3 写一个商城项目，目前已经开始着手开发，测试完成后正式开源到 GitHub，让你们也能够用现成的 Vue3 大型商城项目源码来练练手。vue

正文

今年上半年，我用 Vue 写了一个商城项目并开源到 GitHub 网站，项目的预览图以下：git

主要用到的技术栈为 Vue 和 Vant，版本分别为 Vue2.6.10 和 Vant 2.5.0，至今为止，已经开源到 GitHub 小半年时间了。github

上个月，Vue 3.0 正式版发布了，有很多朋友问我会不会把 newbee-mall Vue 版本升级到 3.0，我一般都是给出确定的答案，不过以前手头上一直有未处理完成的事情就没空处理这件事，这两天把那些事情处理完后终于有了时间。app

因此，在这里呢，我也郑重的通知一下你们，newbee-mall-vue-app 这个开源的商城项目，我打算用 Vue3 进行升级重构了，目前已经开始着手开发了。post

与以前我作过的开源项目同样，此次使用 Vue3 开发的商城项目，全部源码也会所有开源，不会藏着掖着哪怕任何一行代码，你们能够放心，开源仓库地址为 https://github.com/newbee-ltd/newbee-mall-vue3-app，升级完成后，代码会所有放在这个仓库中，感兴趣的能够先关注一下。学习

接下来，我会介绍一下升级的想法以及重构计划。测试

newbee-mall 开源项目的历程

其实新蜂商城项目，已经作过两个版本，此次使用 Vue 3.0 进行升级，应该算得上是新蜂商城项目的第三个大版本迭代了。优化

因为常常在网上发布文章而且也作了几个开源项目，因此本身也建了几个 QQ 交流群，有 500 人的群也有 2000 人的群，在几个交流群里和你们沟经过，貌似你们对商城类的项目更为感兴趣，因此就向你们承诺要开发一个商城项目，2018 年就有了这个想法，以后就开始实际的动手去作这件事情。网站

2019 年 10 月份我在 GitHub 开源仓库中上传了新蜂商城项目的全部源码，这是新蜂商城的第一个版本。设计

至今已经有一年多的时间了，以后也陆陆续续的进行优化和问题修改，感兴趣的能够去了解一下这个 Spring Boot 技术栈开发的商城项目，开源地址以下：

newbee-mall 在 GitHub 和国内的码云都建立了代码仓库，若是有人访问 GitHub 比较慢的话，建议在 Gitee 上查看该项目。

新蜂商城项目初版本开源后的那段时间，也就是在 2019 年末的时候，群里的朋友又说想要一个 Vue 版本的商城，我也承诺你们必定会开发并开源出来，以后就一直在计划使用 Vue 进行项目的迭代，2020 年开始开发而且本身私下一直在测试，以前也有文章介绍过测试过程和存在的问题，测试出问题后就修改 bug。

2020 年 5 月底将 Vue 版本的全部代码开源了，这是新蜂商城的第二个版本，开源地址以下：

原来的新蜂商城只有一个 PC 端的页面，加入了 Vue 版本以后新蜂商城的展示形式更加丰富了，新蜂商城变成了这样：

从左到右依次为：新蜂商城后台管理系统页面、新蜂商城 PC 端页面、新蜂商城 Vue 版本的三个页面。

以上就是 newbee-mall 开源项目的大体历程和时间线，如今又走上一个新的台阶，也能够说是一直在进步吧，将来也会作更多拓展和优化，但愿你们多提一些建议。

关于 newbee-mall 开源项目使用 Vue3 升级的想法和具体的开发计划

上个月，Vue 3.0 正式版发布了，关于 Vue3 的一些知识点，在这里我也就很少啰嗦了，我来谈一下 newbee-mall 开源项目使用 Vue3 升级的想法，以及具体的开发计划和代码开源时间。

重构升级的想法

其实，一开始写这个开源商城项目的时候，就一直有留意过 Vue 3 的相关事宜，甚至一度也想过直接用 Vue3 来写，可是正式版一直没有发布，因此就继续用 Vue 2.x 版本开发了。

5 月份的时候说是 6 月份发布 release，6 月份的时候说是 7 月份发布 release，7 月份的时候说是 8 月份发布 release，把个人头都给忽悠掉了，就很灵性，哈哈哈。

8 月份的时候说是 9 月份发布 release，而后就真的发布 release 版本了，2020 年 9 月 19 日，Vue3 正式开源！头都给我秀歪了。

Vue3 版本的正式发布，再加上和群里的各位开发者朋友们一直在交流，就决定开始进行升级。

具体的开发计划

Vue3 正式版发布还不到一个月，我也在学习和摸索，如今也已经用 Vue3 写了很多的 demo，多多少少也掌握了一些知识点，因此近期会全力投入到 newbee-mall Vue3 版本的升级开发中。

从今天开始算起，计划在半个月内升级完成，若是进度快的话，也争取在这个时间点内测试完成，而且把一些明显的 bug 修复掉。

因此具体的时间点应该是： 2020 年 10 月底开发完成，到时候会在群里通知你们帮忙进行线上的测试。

测试完成后，正式开源，让你们也能够用现成的 Vue3 项目练练手。

其它材料的准备

不止是项目开发，项目相关的一些图片我也要准备一下，由于是作关于 Vue3 版本的内容，因此要搞一些带有 Vue3 元素的图片，不过 Vue3 的图标较少，因此也在尝试着本身弄一下关于 Vue3 的图片素材。

做图这件事也是很是搞笑的，关于 Vue3 的素材并很少，官方好像也只有一个 Vue 的 LOGO 图片和一张小海盗的图片，我就尝试用这两个图标做为素材，去弄一下排版和构图。

不过，第一张图片就直接拉胯了，一开始是这样式儿的：

当时看到的时候，感受那一瞬间我绝对脑溢血了。

这张图片老子是看到一次就会笑一次，很想发给尤雨溪大佬，太喜感了，让他“夸”我一下。我感受尤大看到这张图，也会给我一个“赞”吧，毕竟“太具备设计感了”。

当时看到这张“成品图”的时候，我™直接笑成一个憨憨了，怎么会搞成这样啊，作的时候没感受出来，导出图片后，怎么看怎么不对劲。

而后就简单画了一下草图，其实我要的图并不复杂，就是把两个图标结合在一块儿便可，重点突出 Vue3 的元素感。

以后，就是一下午的找素材、换背景、排版、调整元素大小、移动位置，最终作出了以下的效果：

上面这张图是竖屏的，也作了横屏的排版，图片以下：

不止如此，还要加一些 newbee-mall 的元素，因而把背景图换成了代码截图，加上了商城元素，以下图所示：

终于再也不是憨憨的图了。

总结

好了，今天的分享到这里就结束啦！

接下来就好好开发新项目，你们等个人好消息吧！

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