現代人生活步調緊湊,很容易忽略生活中的小美好。這個專案希望透過一個溫柔的每日記錄儀式,讓使用者在一天的最後,回想並寫下一件當日的小小美好,系統會將這句話化作一顆光珠,緩緩落進專屬的玻璃採樣瓶中。
我將使用 Vue 3 搭配 Vite 從零開始打造這個網頁,內容涵蓋元件化開發、響應式資料、動態互動效果,並串接 LocalStorage 讓所有紀錄安全留在使用者自己的瀏覽器裡。每個月的最後一天,瓶中光珠會化作一張專屬的色譜回顧卡片,可下載保存。希望能藉由這 30 天的實作紀錄,練習 Vue 3 的核心概念,同時也做出一個真正可以讓自己使用的小網頁。
做「微光採集瓶」的動機 不管是新聞標題或是文章內容,大家應該都有接收過這個資訊:「現代人越來越重視心理健康。」,這顯然是一個好消息;但換個角度想,會有這種趨勢,...
今天我們要來認識這個專案會用到的工具,包含主要設計畫面的 Vue 和建置工具 Vite。 以下內容有參閱 Vue.js 和 Vite 的官方文件:Vue.js、...
小提示 在開始使用 Vite 之前,請確認電腦中已經安裝好 Node.js。因為我們後續用來下載專案、啟動伺服器的 npm 指令,以及 Vite 在電腦背後...
還記得昨天我們拆解了 .vue 檔案的三個區塊嗎?如果像昨天一樣只是把畫面寫死、只能看到固定的字,那不是很無聊嗎?所以今天我們要正式讓 <script s...
可以往前點到 Day 3 那篇,在拆解 .vue的三個區塊時,<style>後面有一個 “scoped”。 為什麼要在 <style>...
延續 Day 5 留在 App.vue 裡的採集瓶初步設計,今天的主要任務就是把資料(Vue 的 JS 狀態)跟畫面(CSS)用 v-bind 接上線。 我希望...
雖然我們的畫面還沒有很完整,但程式碼在後面只會越來越多,所以趁今天我們要來進行元件拆分,整理一下整個專案的結構。 一、什麼是元件?為什麼要拆? 你可以把 App...
昨天我們把瓶子整理成了獨立的 GemJar.vue 元件。不過目前的「放入」按鈕非常單調,點下去只有數字 +1。生活每天都有不同起伏,有時候平靜、有時候雀躍,你...
昨天我們替採集瓶加上了心情調色盤,讓每次採集前都能選取屬於今天的色彩。但光有顏色還不夠,如果不能把當天發生的那件小事化作文字,時間一久,可能就忘了當初為什麼選了...
昨天我們在 Console 印出了一筆完整的紀錄,但那筆資料只是被印在 Console 裡,畫面上完全沒有反映,瓶子還是空的,數字也只是單純計數。 今天,我們要...