我打算用 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 的元素，於是把背景圖換成了程式碼截圖，加上了商城元素，如下圖所示：
終於不再是憨憨的圖了。
總結
好了，今天的分享到這裡就結束啦！
接下來就好好開發新專案，大家等我的好訊息吧！
除註明轉載/出處外，皆為作者原創，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利。