iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

完成_個人健康習慣追蹤相關功能網站 系列

我想做的主題網站有點像是「任務追蹤網站」那樣,主題選擇做跟醫療,與個人健康習慣追蹤相關的功能網站。
這次是我第一次參賽,因為期許自己可以做出成果來,所以採用洋蔥式安排,希望這樣的規劃可以使成功率上升!
且走且看且調整,看我最終可以做出甚麼來吧!

參賽天數 22 天 | 共 22 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 11

自動寄信提醒(EmailJS)— 註冊與初始設定

進入第 2 層的進階功能,我的第一個挑戰就是「自動寄信提醒」。構想很單純,我希望這個任務追蹤小網站,不只是能在網頁上記錄任務,還能主動寄一封 Email 給自己...

2025-09-25 ‧ 由 rachelcltang 分享
DAY 12

自動寄信提醒(EmailJS)_第一封網站寄來的信

昨天(Day 11)我才剛完成 EmailJS 的註冊,拿到很重要的 Public Key、Service ID 和 Template ID。今天(Day 12...

2025-09-26 ‧ 由 rachelcltang 分享
DAY 13

中英文切換(Vue i18n)— 安裝與字串抽離

昨天(Day 12)才剛完成「網站會自動寄信提醒」的功能,我就突然想到一個問題,如果有人看不懂中文,這個網站要怎麼用?不是會很不方便嗎?所以我希望能讓我的小網站...

2025-09-27 ‧ 由 rachelcltang 分享
DAY 14

中英文切換(Vue i18n)— 與 EmailJS 整合

雖然昨天做完了語言轉換功能,不論首頁的標題、任務輸入框的提示文字,還是使用說明頁的 FAQ,現在都能隨著使用者切換成中文或英文,但是在測試多幾次之後,又仔細想了...

2025-09-28 ‧ 由 rachelcltang 分享
DAY 15

主題切換(深/淺色)— 設計 Token 化

到昨天為止,我設計的網站已經有了完整的基本功能,雖然看起來已經很實用了,但用久之後,出現了一個問題,那就是 白底在晚上使用真的很刺眼, 我自己晚上 coding...

2025-09-29 ‧ 由 rachelcltang 分享
DAY 16

主題切換(深/淺色)— 全站覆蓋與細節

昨天已經完成了主題 Token 的基礎,今天希望可以進一步把整個網站都「吃」進 Token,讓深/淺色模式不只是背景換色,而是有能讓整個使用體驗更完整的感覺,為...

2025-09-30 ‧ 由 rachelcltang 分享
DAY 17

RWD 響應式設計(手機/平板/桌面)

昨天在完成顏色轉換之後,我就在想,要是換成手機,或平板打開會不會爆版呢?於是,這就是今天我所想達到的目標,這樣一來,不論是用甚麼裝置,都不至於讓畫面太難使用。那...

2025-10-01 ‧ 由 rachelcltang 分享
DAY 18

核心響應式:ref/reactive/computed/watch

昨天完成了 RWD 響應式設計之後,我就開始思考,這個網站除了「能夠在不同螢幕下正常顯示」之外,還能不能再變得更聰明, Vue 的魅力並不只是畫面上好看,更是在...

2025-10-02 ‧ 由 rachelcltang 分享
DAY 19

元件溝通規範:props/emit 強化

在前幾十天,雖然已經可以透過 Vue 的基礎機制,把任務清單、統計列、篩選工具、主題與語言切換做出來,功能逐漸成形,畫面也能操作,但如果仔細檢查的話,就會發現父...

2025-10-03 ‧ 由 rachelcltang 分享
DAY 20

生命週期與初始化順序

昨天把元件溝通規範統一後,今天我也沒有急著加新功能,而是把整個 App 的起跑順序做理清,在正確時機載入資料、加上 Skeleton 骨架、把語言/主題/任務的...

2025-10-04 ‧ 由 rachelcltang 分享