用Vue & Firebase 實作簡易購物網站 05.設計會員中心主頁
※成品連結: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的位置貼上即可。
(三)完成畫面
※user.scss的內容是依pro-sidebar-template範例中css的內容作修改,user.scss程式碼內容如下: