鐵人檔案
我知道電商網站已經做到爛了，不過是一個可以練習前端功能大部分面向的專案。
用到的技術：NUXT3, VUE3, Pinia, i18n(部分), Vitest
Layout：SCSS(手刻)
功能：Landing Page, Product List, Product Datail, Shopping Cart, Purchase Order, Sign in/Login, Membership Management
過去一直都做infra system的部分功能，想趁參加鐵人賽的機會來激勵自己做一個比較完整的網站。
本篇也是蓋地基的工作，先把error handling先規劃好。 目錄 官網說... Handle錯誤 報錯 錯誤頁面 測試-API錯誤 測試-環境錯誤 官...
先說一下為什麼要用Pinia而不是VueX好了，因為用過後真的就回不去了，只要理解框架狀態管理的模式，剩下的真的就像在寫js那樣...當然習慣VueX的樣模式的...
商品功能的API使用dummyData-Products的APIs，就沒有自己寫了。會員功能則搭配firebase。把他們的資料模型列出來，然後依序創建他們的t...
這邊也是直接參照Nuxt i18n官網，我覺得他文件寫得滿好的，照做沒毛病～ 再提一下，由於這個專案的產品資料是拿dummyData現成的，只有英文，而我也沒打...
這是第一次用firebase，記錄一下坑坑點點的過程。 目錄 新增Firebase Authentication專案 在NUXT3裡設定firebase co...
這邊只是用最低限度的css，以完成功能為主，將所有需要預先製作的UI Kits，其中包含icon，還有大部分Components做好。這邊先列出需要做的comp...
Aha~終於來到首頁了，這邊規劃很簡單，一個輪播的廣告版位、及每個產品分類的前四個商品hightlights，用lazy loading來處理這邊，往下滑才去要...
接著到產品列表頁啦～除了本頁基本的三大元素外，還會涉及到網址結構，那就繼續摳頂吧～ 目錄 Routing 產品頁大圖 Filter 產品列表 程式碼 Rou...
產品細節頁面只是把資料拉出來而已，不難，至於加到購物車先做個殼出來就好，等到開始購物車區塊再來處理這塊。 完成圖 完成圖
購物車會使用localstorage結合store 目錄 購物車的功能： ShoppingCartStore Components - ShoppingCar...
