iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
佛心分享-SideProject30

NUXT3xVUE3xPINIA: 從零開始寫電商 系列

我知道電商網站已經做到爛了,不過是一個可以練習前端功能大部分面向的專案。
用到的技術:NUXT3, VUE3, Pinia, i18n(部分), Vitest
Layout:SCSS(手刻)
功能:Landing Page, Product List, Product Datail, Shopping Cart, Purchase Order, Sign in/Login, Membership Management
過去一直都做infra system的部分功能,想趁參加鐵人賽的機會來激勵自己做一個比較完整的網站。

參賽天數 14 天 | 共 29 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文
DAY 14

[Day 21] Purchase Order Page

結帳頁面大方向: 購物列表 購物品項內容 圖片 名字 金額 數量 總金額 購物品項數量修改 購物品項刪除 購物細節 購物總數量 購物總金額 //...

2024-09-12 ‧ 由 athem 分享
DAY 14

[Day 22] 用middleware做登入與否的操作

今天這個章節要把之前做登入時,保存登入狀態的功能完成;回顧一下登入,在[Day 16] 開始第個頁面:登入/註冊頁 + Firebase: Authentica...

2024-09-13 ‧ 由 athem 分享
DAY 14

[Day 23] Unit test - Vitest

基本上文件寫得很清楚,所以照著做就差不多。然後我覺得單元測試可以講很多,這篇簡單帶過一個測試案例。 目錄 Installation & Configu...

2024-09-14 ‧ 由 athem 分享
DAY 14

[Day 24] CI/CD: 自動部署到GitPage & 自動測試

先說一下,正常專案不會在local寫完後直接推到main,通常會有dev, sandbox, prod環境,我這邊是想focus在自己想玩的區塊,所以才把環境簡...

2024-09-15 ‧ 由 athem 分享
DAY 14

[Day 25] 開始刻畫面~SCSS環境/共用設定

style的架構設計 使用scss installation 共用scss檔: _main.scss & reset.css 配置 RWD color...

2024-09-16 ‧ 由 athem 分享
DAY 14

[Day 26] 開始刻畫面~共用元件: NavBar

刻navBar~ 目錄 NavBar Category Menu (mobile) ShoppingCart Language 閒聊碎碎念 Na...

2024-09-17 ‧ 由 athem 分享
DAY 14

[Day 28] CSS,繼續刻元件

今天刻product會用到的elements,有改了一點功能(T_T)所以程式面也有花時間小修一點 目錄 Product productItem Filte...

2024-09-20 ‧ 由 athem 分享
DAY 14

[Day 29] CSS - Login/Regis Pages

整體來說,這兩個頁面沒有什麼難度。由於登入頁及註冊頁的版型很像,所以這邊新增一個新的layout,真的覺得NUXT的layout真的非常好用~~~ 登入/註冊...

2024-09-21 ‧ 由 athem 分享