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

1

Vue3 来了

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

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

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

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

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

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

2

newbee-mall 开源项目的历程

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

由于经常在网上发布文章并且也做了几个开源项目，所以自己也建了几个 QQ 交流群，有 500 人的群也有 2000 人的群，在几个交流群里和大家沟通过，貌似大家对商城类的项目更为感兴趣，所以就向大家承诺要开发一个商城项目，2018 年就有了这个想法，之后就开始实际的动手去做这件事情。

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

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

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

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

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

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

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

• newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall-vue-app

• newbee-mall in Gitee : https://gitee.com/newbee-ltd/newbee-mall-vue-app

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

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

以上就是 newbee-mall 开源项目的大致历程和时间线，现在又走上一个新的台阶，也可以说是一直在进步吧，未来也会做更多拓展和优化，希望大家多提一些建议。

3

使用 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 项目练练手。

4

其它材料的准备

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

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

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

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

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

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

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

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

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

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

终于不再是憨憨的图了。

5

总结

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

接下来就好好开发新项目，大家等我的好消息吧！

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

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

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

● 程序员的副业：996的我们还要做副业吗？

● 程序员的副业：讲一讲线上视频课程制作的经历

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

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

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

● 程序员，你怎么这么忙？

● 捅娄子了，写个bug被国家信息安全漏洞共享平台抓到了

● SpringBoot+MyBatis开发JavaWeb线上商城项目

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