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 天 | 共 17 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 11

[Day 11] Error handling

本篇也是蓋地基的工作,先把error handling先規劃好。 目錄 官網說... Handle錯誤 報錯 錯誤頁面 測試-API錯誤 測試-環境錯誤 官...

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

[Day 12] 資料控制中心: Store via Pinia

先說一下為什麼要用Pinia而不是VueX好了,因為用過後真的就回不去了,只要理解框架狀態管理的模式,剩下的真的就像在寫js那樣...當然習慣VueX的樣模式的...

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

[Day 13] Models - 建立資料模型的type

商品功能的API使用dummyData-Products的APIs,就沒有自己寫了。會員功能則搭配firebase。把他們的資料模型列出來,然後依序創建他們的t...

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

[Day 14] 設定i18n

這邊也是直接參照Nuxt i18n官網,我覺得他文件寫得滿好的,照做沒毛病~ 再提一下,由於這個專案的產品資料是拿dummyData現成的,只有英文,而我也沒打...

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

[Day 16] 開始第個頁面:登入/註冊頁 + Firebase: Authentication

這是第一次用firebase,記錄一下坑坑點點的過程。 目錄 新增Firebase Authentication專案 在NUXT3裡設定firebase co...

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

[Day 15] 來做部分共用的components吧+設定ICON!!

這邊只是用最低限度的css,以完成功能為主,將所有需要預先製作的UI Kits,其中包含icon,還有大部分Components做好。這邊先列出需要做的comp...

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

[Day 17] Landing Page

Aha~終於來到首頁了,這邊規劃很簡單,一個輪播的廣告版位、及每個產品分類的前四個商品hightlights,用lazy loading來處理這邊,往下滑才去要...

2024-09-08 ‧ 由 athem 分享