新蜂商城 Vue 移動端版本開源啦！
去年開源新蜂商城專案後，就一直在計劃這個專案 Vue 版本的改造，2020 年開始開發並且自己私下一直在測試，之前也有文章介紹過測試過程和存在的問題，修改完成後，於 5 月底將 Vue 版本的所有程式碼開源了，只是後面一直太忙，沒有時間整理這篇文章。
現在，向大家介紹一下這個 Vue 版的前後端分離商城專案。
所有的程式碼、檔案全部都開源到 GitHub 倉庫中，並沒有任何藏著掖著的行為，不會說缺少哪個依賴或者某個重要功能，這種事情是不存在的，大家先看看文章和預覽圖，覺得不錯的朋友可以繼續瞭解一下這個專案。
當然，也希望感興趣的朋友可以找找其中的問題，提一些 pr 或者 issue，讓這個開源專案能夠減少問題並且保持進步。
newbee-mall 在 GitHub 和國內的碼雲都建立了程式碼倉庫，如果有人訪問 GitHub 比較慢的話，建議在 Gitee 上檢視該專案，兩個倉庫會保持同步更新。
- 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
新蜂商城回顧
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 上檢視該專案。
當然，本文的主角並不是這個商城專案，而是這個專案的第二個版本：新蜂商城 Vue 版本。
之前我也在
《「newbee-mall新蜂商城開源啦」1000 Star Get !倉庫Star數破千！記錄一下》
和
《「newbee-mall新蜂商城開源啦」GitHub 上最熱門的 Spring Boot 專案，我也要做一次靚仔！》
兩篇文章中介紹了新蜂商城的未來規劃和 Vue 版本的開發想法，我也並沒有食言，現在這個 Vue 商城已經開發完成並且開源到 GitHub 了。
原來的新蜂商城只有一個 PC 端的頁面，現在加入了 Vue 版本之後，新蜂商城的展現形式更加豐富了，現在的新蜂商城變成了這樣：
從左到右依次為：新蜂商城後臺管理系統頁面、新蜂商城 PC 端頁面、新蜂商城 Vue 版本的三個頁面。
不僅僅是展現形式的增多和產品線的豐富，技術棧也加入了 Vue，開發模式也變成了前後端分離模式。
Vue 版本開發及測試
這個專案的開發和製作過程也是很有意思的事情，所以大致的整理了一下時間線。
具體的開發時間有些記不清楚了，查了一下提交記錄，第一次提交是在 2020 年的 2 月 13 號：
不過初次提交的程式碼中，已經有很多檔案了，所以之前也是開發過一段時間的，時間應該在 2020 年 1 月份，那個時候開始動工開發。
開發版本的最後一次提交是在 2020 年 5 月 15 日：
開發的時候感覺還不錯，就是有時間就完善一些功能，並沒有特別大的壓力，直到測試階段，才感覺到一些壓力，因為確實測出了不少的問題，不僅僅是自測，在 QQ 群裡讓大家幫忙測試的時候也收到了不少的反饋，改了不少的 bug。
測試流程一共走了三次。
第一次是在四月初，當時功能並沒有完全開發完成，不過主要頁面都製作好了，所以就和幾個朋友簡單測試了一下，主要圍繞頁面樣式、UI還原度、資料顯示以及基本的功能流程，問題很多，自己寫的時候沒有發現，但是讓別人測的時候，大家基本都提出了很多的問題。
第一次測試結果：稀爛。
看到這個結果還是有些慌的，因為之前計劃就是在 5 月初開源的，基礎問題還有不少確實就有點完不成既定計劃的意思，之後花了比較多的精力在這個專案上面，把問題都修復掉、同時把剩下的功能開發好，花了 20 天左右的時間。
緊接著就是第二次測試，時間點是在四月二十幾號，又多找了幾個朋友幫忙測試。這次測試就要比之前一次更加全面，驗證第一次的問題修復掉沒有，同時要走完所有的功能流程，每一個步驟都要反覆測試、反覆的驗證，有些能修改的當時就修改了，問題複雜的就記錄下來後面再改。還有機型和適配也簡單的驗證了一下，但是畢竟不是專業的測試，手頭上也沒有太多的機器，所以只是簡單的驗證了一波，也發現了一些問題。
第二次測試結果：及格。
之後呢，當然就是整理這兩次的測試結果及其中的問題，然後針對性的去修復，本來計劃在五月初開源，但是因為兩次的測試結果不是非常理想，就順延到後面了，測試過程和修改過程花費的時間挺多的，主要還是對自己負責，對大家負責，我把一份不完整或者有問題的程式碼放到開源倉庫，這肯定也不是一個太好的做法，我儘量把完善的內容交給大家。又開發了大概 20 天左右，把所有問題都修復完成並且自己也驗證了多次。
這兩次測試時碰到的問題我都記錄到這篇文章中了，有好奇的同學也可以去看一下：《「newbee-mall新蜂商城開源啦」 前後端分離的 Vue 版本即將開源》。
第三次測試就是在 5 月 23 號：
當天是週六，感覺大家可能都有時間，就把這件事發到了我的幾個 QQ 群裡，讓所有人都去測試和體驗一下，從註冊流程到之後的購物模組都測試一遍，聊天記錄挺多的，感覺大家也比較熱情，但是當時的體驗並不是非常好，因為個人伺服器的頻寬比較低，所以大家都覺得有些卡頓。
這次測試除了訪問有些慢之外，大家並沒有反饋太多問題，之後針對這些零零散散的問題又進行了一次修復，然後在 2020 年 5 月 30 號就全部放到 GitHub 開源倉庫上了：
以上就是新蜂商城 Vue 版本的開發及開源過程，從計劃到開發、到測試、再到成功開源差不多花費了半年的時間。結果也很好，我沒有放大家鴿子，從去年就告訴大家要開源 Vue 版本的商城專案，到今年把所有程式碼開發並放到開源網站上，雖然時間推遲了一個月左右，但是整體來說是比較圓滿的。
希望大家喜歡這個專案，多多支援它！有問題我一定及時修復，同時我也會繼續圍繞新蜂商城做其他的功能和技術棧的擴充。
總結
從年初寫下第一行程式碼到 5 月 30 號把所有程式碼全部開源，花費了半年時間寫了一個 Vue 商城的開源專案，雖然過程挺曲折，但是結果總是讓人開心的，希望大家也能滿意。
這是第一篇介紹新蜂商城 Vue 版本的文章，時間比較倉促並沒有整理太多內容，後續會根據大家的反饋再整理幾篇文章，如果大家有什麼問題也可以及時和我說，我之後也會整理出更詳細的內容給大家。
由於去年給了大家這樣一個承諾：我要寫一個 Vue 版本的商城專案給大家。
今年，我做到了。
於是，新蜂商城 Vue 版本就開源了。
寫在最後
做個小推廣，感興趣的朋友可以看一看，最近我在掘金平臺上釋出了一個新的專欄《Vue 商城專案開發實戰》（預售階段5折優惠）。
基於真實專案的實戰開發，即學即用！
這是一個前後端分離的線上商城專案，技術棧為 Spring Boot 和 Vue，幫助讀者具備開發和統籌一個完整專案的能力是本專欄的目標，本專欄將會帶你進行一次 Spring Boot + Vue 全棧專案開發的開發實戰，讓你在實戰中融會貫通當下的熱門技術棧。
選取當下主流的技術，帶你從零開始實現一個完整且純正的前後端分離商城應用，實現前端、後端、資料庫設計與開發流程，本專欄將通過技術棧的詳細講解、多個功能模組的開發實踐、並結合實際專案開發中的產品流程來完成這個任務。
感興趣的朋友可以關注一下。
除註明轉載/出處外，皆為作者原創，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利。