Vue3教程：Vue3 开源商城项目重构计划正式启动！

推荐一下本人近期维护的开源项目：

Spring Boot 开源电商项目（含商城端和后台管理系统）：https://github.com/newbee-ltd/newbee-mall

Spring Boot + Vue3 前后端分离商城项目：https://github.com/newbee-ltd/newbee-mall-vue3-app

Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统：https://github.com/newbee-ltd/vue3-admin

我打算用 Vue3 写一个商城项目，目前已经开始着手开发，测试完成后正式开源到 GitHub，让大家也可以用现成的 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，升级完成后，代码会全部放在这个仓库中，感兴趣的可以先关注一下。

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

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 版本之后新蜂商城的展现形式更加丰富了，新蜂商城变成了这样：