Vue3 來了,Vue3 開源商城項目重構計劃正式啓動!

我打算用 Vue3 寫一個商城項目,目前已經開始着手開發,測試完成後正式開源到 GitHub,讓你們也能夠用現成的 Vue3 大型商城項目源碼來練練手。vue

正文

今年上半年,我用 Vue 寫了一個商城項目並開源到 GitHub 網站,項目的預覽圖以下:git

主要用到的技術棧爲 Vue 和 Vant,版本分別爲 Vue2.6.10 和 Vant 2.5.0,至今爲止,已經開源到 GitHub 小半年時間了。github

上個月,Vue 3.0 正式版發佈了,有很多朋友問我會不會把 newbee-mall Vue 版本升級到 3.0,我一般都是給出確定的答案,不過以前手頭上一直有未處理完成的事情就沒空處理這件事,這兩天把那些事情處理完後終於有了時間。app

因此,在這裏呢,我也鄭重的通知一下你們,newbee-mall-vue-app 這個開源的商城項目,我打算用 Vue3 進行升級重構了,目前已經開始着手開發了。post

與以前我作過的開源項目同樣,此次使用 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 的元素,因而把背景圖換成了代碼截圖,加上了商城元素,以下圖所示:

終於再也不是憨憨的圖了。

總結

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

接下來就好好開發新項目,你們等個人好消息吧!

除註明轉載/出處外,皆爲做者原創,歡迎轉載,但未經做者贊成必須保留此段聲明,且在文章頁面明顯位置給出原文連接,不然保留追究法律責任的權利。

相關文章
相關標籤/搜索