用Vue & Firebase 實作簡易購物網站 05.設計會員中心主頁
Published in
Jun 22, 2020
※成品連結：vue-shop-3b5cc.web.app
05.設計會員中心主頁
一、設計會員登入介面(User.vue)
使用開源的範例修改，參考資料附於文章最下方。
(一)程式碼
1.views資料夾->新增User.vue，assets資料夾->新增user.scss
2.assets資料夾->於app.scss加入
@import './user.scss';3.程式碼內容
(1)user.scss程式碼內容：※因內容較多，因此附於文末。
(2)於router.js加上：
※補充：Member-Centerr先使用<router-link>，之後會改回<a>標籤，寫@click方法觸發click事件：判斷是否有使用者登入，有使用者登入才可到Member-Center會員中心，Admin-Center管理者中心則會多一個判斷使用者等級的流程。
(3)於Navbar.vue加上：
(4)User.vue程式碼內容
(5)public資料夾->於index.html引入fontawesome
因使用到fontawesome的icons，因此需在index.html的<head>區中引入
(二)參考資料
參考範例的連結如下：
1.pro-sidebar-template：會員介面範例
2.Setup Webfont with CDN：使用fontawesome的icons的設定
3.Font Awesome Icons：可以自行變更Icon的圖案。
例如：欲使用這個user icon，複製<i class=”fas fa-user”></i>至html中要放此icon的位置貼上即可。
(三)完成畫面
