用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連結。

補充說明

二、製作過程文章列表

01.前言

02.下載Vue.js及建立專案

03.用Bootstrap 4 做導覽列

04.設計首頁頁面

05.設計會員中心主頁

06.設計會員中心分頁(Nested Routes)

07.準備登入視窗

08.將Firebase串接Vuejs

09.會員註冊、登入

10.會員登出、驗證

11.管理商品頁面(一)

12.管理商品頁面(二)

三、參考資料來源

(一)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專案中的設定檔內容，之後的文章會提到。

四、好用資源推薦

在正式進入網頁撰寫的過程前，先推薦幾個在接下來製作過程中可以用上的資源：

(一)圖片素材：有質感且免費的圖庫

1.插圖：https://undraw.co/search

2.照片：https://www.freepik.com/

(二)測試信箱：可產生隨機Email，做為測試會員註冊登入用，在網頁下方可以讀取該Email收到的信件，如：會員信箱認證信、會員重設密碼認證信。

網址：https://emailfake.com/