vlambda博客
学习文章列表

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

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


1


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

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


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


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


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


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



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



2


Vue3 来了,Vue3 开源商城项目重构计划正式启动!
newbee-mall 开源项目的历程


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


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


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



  • 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。



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


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

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


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


3


Vue3 来了,Vue3 开源商城项目重构计划正式启动!
使用 Vue3 升级的想法和具体的开发计划


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


重构升级的想法


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


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

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

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

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

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


具体的开发计划


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


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


所以具体的时间点应该是:2020 年 10 月底开发完成,到时候会在群里通知大家帮忙进行线上的测试。


测试完成后,正式开源,让大家也可以用现成的 Vue3 项目练练手。


4


Vue3 来了,Vue3 开源商城项目重构计划正式启动!
其它材料的准备


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


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


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

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

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


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


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


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


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


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


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


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


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


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


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


终于不再是憨憨的图了。


5


Vue3 来了,Vue3 开源商城项目重构计划正式启动!
总结


好了,今天的分享到这里就结束啦!


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


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

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


● 




● 


● 


● 


● 


● 


● 


● 


●