推薦一下本人近期維護的開源項目:
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 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 開源項目的大致歷程和時間線,現在又走上一個新的台階,也可以說是一直在進步吧,未來也會做更多拓展和優化,希望大家多提一些建議。
關於 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 的元素,於是把背景圖換成了代碼截圖,加上了商城元素,如下圖所示:
終於不再是憨憨的圖了。
總結
好了,今天的分享到這里就結束啦!
接下來就好好開發新項目,大家等我的好消息吧!
除注明轉載/出處外,皆為作者原創,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接,否則保留追究法律責任的權利。