用Vue & Firebase 實作簡易購物網站 01.前言
01.前言
在YouTube觀看六角學院使用Vue及Firebase製作聊天室的教學後,開始尋找其他使用Vue及Firebase製作專案的學習資源,找到了另一個YouTube教學影片,符合想要用Vue及Firebase製作購物網站的目標,參考資料的連結放於文章末端。
前後大概用一個多月的時間,跟著教學做完接金流前的步驟後,並依照教學內容調整、增加了一些功能,能趁記憶猶新時將製作的過程記錄、整理起來。
一、購物網站作品
成品連結:https://vue-shop-3b5cc.web.app
網站架構:
※補充說明
1.管理者身份才可看到首頁Admin-Center連結及Admin-Center頁面內容。
2.導覽列登入前會看到Login/Register連結,登入後會看到Log out連結。
三、參考資料來源
(一)YouTube教學影片:
https://www.youtube.com/watch?reload=9&v=UrUuvNyK-Os
(二)GitHub程式碼:
https://github.com/Hujjat/vue-shop
影片中的教學者有將程式碼分享於GitHub,程式碼下載或git clone後須將src資料夾中firebase-example.js檔的config改成個人Firebase專案中的設定檔內容,之後的文章會提到。
四、好用資源推薦
在正式進入網頁撰寫的過程前,先推薦幾個在接下來製作過程中可以用上的資源:
(一)圖片素材:有質感且免費的圖庫
(二)測試信箱:可產生隨機Email,做為測試會員註冊登入用,在網頁下方可以讀取該Email收到的信件,如:會員信箱認證信、會員重設密碼認證信。