Vue3教程:一個基於 Vue 3 + Vant 3 的商城專案開源啦!

我是13發表於2020-11-09

之前釋出過一篇文章,告訴大家我要開發一個 Vue3 的商城專案並開源到 GitHub 上,供大家練手和學習,隨後也一直有收到留言和反饋,問我開發到哪裡了,什麼時候開源之類的問題,今天終於可以通知大家,完成啦!??開源啦!??

由於正常上班的緣故,所以只能抽出空閒時間來做,適逢幾次加班,導致比預估的工時推遲了一些時間,2020 年 11 月 3 日把專案開發的差不多了,之後一直處於自測和修改小問題的階段。

我發現大家對這個專案的熱情也挺高,所以在上週末也把專案部署到線上,讓大家幫忙測試了一波。不過時間匆促還沒來得及整理這些事情,後續我會把測試記錄整理併發布上來,讓大家看一下過程中遇到了哪些問題。

前文回顧:《Vue3 來了,Vue3 開源商城專案重構計劃正式啟動!》

開源地址

所有的程式碼、檔案全部都開源到 GitHub 倉庫中,並沒有任何藏著掖著的行為,不會說缺少哪個頁面或者某個重要功能,這種事情是不存在的,大家先看看文章和預覽圖,覺得不錯的朋友可以繼續瞭解一下這個專案。

當然,也希望感興趣的朋友可以找找其中的問題,提一些 pr 或者 issue,讓這個開源專案能夠減少問題並且保持進步。

newbee-mall-vue3-app 在 GitHub 和國內的碼雲都建立了程式碼倉庫,如果有人訪問 GitHub 比較慢的話,建議在 Gitee 上檢視該專案,兩個倉庫會保持同步更新。

預覽地址

Vue3 版本的商城專案已經部署到線上環境,在開源倉庫裡可以看到訪問地址。

由於伺服器的頻寬並不是非常大,擔心大家直接把伺服器擠爆了,希望大家不要一起訪問,哈哈哈哈。

技術棧

新蜂商城 Vue 版本的第一個版本是 Vue2.6,這次是全新的升級,技術棧和元件也對應的升級為 Vue3.x、Vue-Router4.x、Vuex4.x、Vant3.x:

預覽圖

之前的開發版本是 Vue 2.6.10 和 Vant 2.5.0,與前一版相比較的話,除了 Vue 和元件的版本升級外,部分圖示和頁面實現也有一些微調,Vue3 版本的商城專案預覽圖如下:

  • 登入頁

  • 首頁

  • 商品搜尋

  • 商品詳情頁

  • 購物車

  • 生成訂單

  • 地址管理

  • 訂單列表

  • 訂單詳情

程式碼貢獻

當然,目前是 newbee-mall-vue3-app 的第一個版本,雖然已經測試過幾輪,不過有時候自測的可能不完善,應該還會有一些問題存在,也希望大家可以提出一些優化建議,可以提交issue,也可以給我留言或者到交流群裡直接艾特我。

當然我也希望大家都能夠為該專案做一下程式碼貢獻,步驟如下:

  • fork 程式碼
  • 建立自己的分支
  • commit並push修改的密碼到你fork的程式碼倉庫
  • 提交 pr

總結

由於時間的關係也沒有時間詳細的講解開發過程和一些注意事項,只是通過這篇簡簡單單的文章告訴大家,Vue 3 版本的商城開發出來了,也第一時間開源了出來供大家學習和練習,過程中如果有任何問題,也希望大家給我反饋,我會盡快的修復掉這些問題。

這篇文章就先這樣了,下週再總結一篇更加豐富的內容,讓大家可以更好的認識這個專案,感謝大家的觀看,然後也希望大家動動發財的小手,幫忙點個 Star或者分享出去讓更多地人可以看到這個專案,謝謝大家的支援啦。

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

相關文章