Vue3 來了,Vue3 開源商城專案重構計劃正式啟動!

我是13發表於2020-10-19

我打算用 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 版本之後新蜂商城的展現形式更加豐富了,新蜂商城變成了這樣:

從左到右依次為:新蜂商城後臺管理系統頁面、新蜂商城 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 的元素,於是把背景圖換成了程式碼截圖,加上了商城元素,如下圖所示:

終於不再是憨憨的圖了。

總結

好了,今天的分享到這裡就結束啦!

接下來就好好開發新專案,大家等我的好訊息吧!

除註明轉載/出處外,皆為作者原創,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連結,否則保留追究法律責任的權利。

相關文章