Vue3 來了，Vue3 開源商城項目重構計劃正式啟動！
我打算用 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-vue3-app，升級完成後，程式碼會全部放在這個倉庫中，感興趣的可以先關注一下。
接下來，我會介紹一下升級的想法以及重構計劃。
newbee-mall 開源項目的歷程
其實新蜂商城項目，已經做過兩個版本，這次使用 Vue 3.0 進行升級，應該算得上是新蜂商城項目的第三個大版本迭代了。
由於經常在網上發布文章並且也做了幾個開源項目，所以自己也建了幾個 QQ 交流群，有 500 人的群也有 2000 人的群，在幾個交流群里和大家溝通過，貌似大家對商城類的項目更為感興趣，所以就向大家承諾要開發一個商城項目，2018 年就有了這個想法，之後就開始實際的動手去做這件事情。
2019 年 10 月份我在 GitHub 開源倉庫中上傳了新蜂商城項目的所有源碼，這是新蜂商城的第一個版本。
至今已經有一年多的時間了，之後也陸陸續續的進行優化和問題修改，感興趣的可以去了解一下這個 Spring Boot 技術棧開發的商城項目，開源地址如下：
- newbee-mall in GitHub : //github.com/newbee-ltd/newbee-mall
- newbee-mall in Gitee : //gitee.com/newbee-ltd/newbee-mall
newbee-mall 在 GitHub 和中國的碼雲都創建了程式碼倉庫，如果有人訪問 GitHub 比較慢的話，建議在 Gitee 上查看該項目。
新蜂商城項目第一版本開源後的那段時間，也就是在 2019 年底的時候，群里的朋友又說想要一個 Vue 版本的商城，我也承諾大家一定會開發並開源出來，之後就一直在計劃使用 Vue 進行項目的迭代，2020 年開始開發並且自己私下一直在測試，之前也有文章介紹過測試過程和存在的問題，測試出問題後就修改 bug。
2020 年 5 月底將 Vue 版本的所有程式碼開源了，這是新蜂商城的第二個版本，開源地址如下：
- newbee-mall in GitHub : //github.com/newbee-ltd/newbee-mall-vue-app
- newbee-mall in Gitee : //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 的元素，於是把背景圖換成了程式碼截圖，加上了商城元素，如下圖所示：
終於不再是憨憨的圖了。
總結
好了，今天的分享到這裡就結束啦！
接下來就好好開發新項目，大家等我的好消息吧！
除註明轉載/出處外，皆為作者原創，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利。
