阅读 13475

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

quote

我打算用 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 开发的商城项目,所有源码也会全部开源,不会藏着掖着哪怕任何一行代码,大家可以放心,开源仓库地址为 github.com/newbee-ltd/…,升级完成后,代码会全部放在这个仓库中,感兴趣的可以先关注一下。

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

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 的元素,于是把背景图换成了代码截图,加上了商城元素,如下图所示:

终于不再是憨憨的图了。

总结

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

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

除注明转载/出处外,皆为作者原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。