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 1

[Day 1] 專案介紹及功能規劃

前言 關於此專案我知道電商專案大家已經看爛了,但也是我覺得很有代表性的專案類型之一。這個專案主要建構在NUXT3上,功能並沒有特殊的地方,就是登入登出、購物車、...

2024-08-23 ‧ 由 athem 分享
DAY 2

[Day 2] 專案技術預先規劃

這個篇幅主要是將整個專案用到的技術定下來。開始想要參加鐵人賽時就在想做一個完整的專案,所以有花時間思考一下:想用哪些技術?想試試什麼? 由於是一個NUXT3基底...

2024-08-24 ‧ 由 athem 分享
DAY 3

[Day 3] 專案功能:Use Case & Functional Map

由於我想做的電商網並不是特殊的那種(對,真的不是),所以就不從TA這邊開始發想規劃。即便如此,目標還是得明確,所以還是將基本的UI/UX步驟走一遍,目的是將功能...

2024-08-25 ‧ 由 athem 分享
DAY 4

[Day 4] Flow Chart: 會員系統、產品相關的 Flow Chart

根據上一篇發想的內容,今天將會員、網站總導覽的Flow Chart規劃完。 目錄 登入 註冊 編輯會員資料 網站總導覽 閒聊碎碎念 登入 登入功能很簡單,只...

2024-08-26 ‧ 由 athem 分享
DAY 5

[Day5] 功能分塊、網站架構圖

在 Day3的時候有畫functional map,其實也規劃出因應功能大概會有哪些區塊、頁面。今天就來將他們列出吧~ 目錄 UI功能規劃 網站架構圖 閒聊碎...

2024-08-27 ‧ 由 athem 分享
DAY 6

[Day 6] Wireframe

過去都用AdobeXD,還真是第一次使用Figma,由於功能強大,今天花滿多時間K一下怎麼使用的。所以今天花滿多時間在規劃及畫圖,一方面因為規劃UI本來就要點時...

2024-08-28 ‧ 由 athem 分享
DAY 7

[Day 7] UI Mock up-1! 先設計UI System 吧~

透過昨天把Wireframe畫出來,對於整個UI會用到的元件更有個底了,今天先把最基本的UI System做好,明天把每個頁面拼出來,這樣就(終於)可以開始寫程...

2024-08-29 ‧ 由 athem 分享
DAY 8

[Day 8] UI Mock up-2! 所有頁面就定位!

Figma啊~~~~花了一些時間邊摸邊練,覺得有很多地方不夠系統化,是有打算在開始切畫面前逮到時間回來重修我的Figma...一邊做一邊在想UI設計師真是辛苦(...

2024-08-30 ‧ 由 athem 分享
DAY 9

[Day 9] 來了!建立專案+設定基本架構

一個多禮拜後,終於打開VSCode了!今天的工作就是建立專案、依照當時的規劃把基本架構建立好(layout, pages, assets...etc.),然後將...

2024-08-31 ‧ 由 athem 分享
DAY 10

[Day 10] 設定CORS及製作API Handling feat. Composable

打地基階段,本篇要將call API的系統設計好,這是經過幾次個人專案後,覺得用起來最適合的方式。產品相關的功能是直接拿dummyjson的API,所以這邊一併...

2024-09-01 ‧ 由 athem 分享