iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

微光採集瓶:用 Vue 3 打造每日美好記錄網頁 系列

現代人生活步調緊湊,很容易忽略生活中的小美好。這個專案希望透過一個溫柔的每日記錄儀式,讓使用者在一天的最後,回想並寫下一件當日的小小美好,系統會將這句話化作一顆光珠,緩緩落進專屬的玻璃採樣瓶中。

我將使用 Vue 3 搭配 Vite 從零開始打造這個網頁,內容涵蓋元件化開發、響應式資料、動態互動效果,並串接 LocalStorage 讓所有紀錄安全留在使用者自己的瀏覽器裡。每個月的最後一天,瓶中光珠會化作一張專屬的色譜回顧卡片,可下載保存。希望能藉由這 30 天的實作紀錄,練習 Vue 3 的核心概念,同時也做出一個真正可以讓自己使用的小網頁。

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

【Day 1】前言-打造能夠紀錄美好的微光採集瓶:為什麼我想要做這個?

做「微光採集瓶」的動機 不管是新聞標題或是文章內容,大家應該都有接收過這個資訊:「現代人越來越重視心理健康。」,這顯然是一個好消息;但換個角度想,會有這種趨勢,...

2026-09-15 ‧ 由 y0yi9ue 分享
DAY 2

【Day 2】 Vue3 & Vite 工具介紹

今天我們要來認識這個專案會用到的工具,包含主要設計畫面的 Vue 和建置工具 Vite。 以下內容有參閱 Vue.js 和 Vite 的官方文件:Vue.js、...

2026-09-16 ‧ 由 y0yi9ue 分享
DAY 3

【Day 3】利用 Vite 建置開發環境

小提示 在開始使用 Vite 之前,請確認電腦中已經安裝好 Node.js。因為我們後續用來下載專案、啟動伺服器的 npm 指令,以及 Vite 在電腦背後...

2026-09-17 ‧ 由 y0yi9ue 分享
DAY 4

【Day 4】讓畫面動起來!認識雙大括號 {{ }} 與響應式 ref( )

還記得昨天我們拆解了 .vue 檔案的三個區塊嗎?如果像昨天一樣只是把畫面寫死、只能看到固定的字,那不是很無聊嗎?所以今天我們要正式讓 <script s...

2026-09-18 ‧ 由 y0yi9ue 分享
DAY 5

【Day 5 】認識 <style scoped> 與刻出採集瓶輪廓

可以往前點到 Day 3 那篇,在拆解 .vue的三個區塊時,&lt;style&gt;後面有一個 “scoped”。 為什麼要在 &lt;style&gt;...

2026-09-19 ‧ 由 y0yi9ue 分享
DAY 6

【Day 6】v-bind 動態綁定:讓瓶身回應你的動作

延續 Day 5 留在 App.vue 裡的採集瓶初步設計,今天的主要任務就是把資料(Vue 的 JS 狀態)跟畫面(CSS)用 v-bind 接上線。 我希望...

2026-09-20 ‧ 由 y0yi9ue 分享
DAY 7

【Day 7】 元件化拆分:整理 App.vue,新建 GemJar.vue

雖然我們的畫面還沒有很完整,但程式碼在後面只會越來越多,所以趁今天我們要來進行元件拆分,整理一下整個專案的結構。 一、什麼是元件?為什麼要拆? 你可以把 App...

2026-09-21 ‧ 由 y0yi9ue 分享
DAY 8

【Day 8】 為今日心情選一個代表色!事件處理 v-on 與 @click

昨天我們把瓶子整理成了獨立的 GemJar.vue 元件。不過目前的「放入」按鈕非常單調,點下去只有數字 +1。生活每天都有不同起伏,有時候平靜、有時候雀躍,你...

2026-09-22 ‧ 由 y0yi9ue 分享
DAY 9

【Day 9】寫下今天的心情!v-model 讓輸入框記住你想說的話

昨天我們替採集瓶加上了心情調色盤,讓每次採集前都能選取屬於今天的色彩。但光有顏色還不夠,如果不能把當天發生的那件小事化作文字,時間一久,可能就忘了當初為什麼選了...

2026-09-23 ‧ 由 y0yi9ue 分享
DAY 10

【Day 10】列表渲染:v-for 與光珠可視化

昨天我們在 Console 印出了一筆完整的紀錄,但那筆資料只是被印在 Console 裡,畫面上完全沒有反映,瓶子還是空的,數字也只是單純計數。 今天,我們要...

2026-09-24 ‧ 由 y0yi9ue 分享