前往
大廳
主題

【Vue + Pinia】Vuetter 模擬匿名社群網站 - Side Project 開發筆記

燐火幽冥 | 2023-10-05 21:40:45 | 巴幣 2114 | 人氣 867



練習用Vue製作靜態網站
CSS 使用 Tailwind 框架,狀態管理使用 Pinia 套件



今年5月的時候花3天弄了一個 Vue 做的模擬社群網站
有點像噗浪偷偷說的概念?但模式偏向貼文的感覺

其實那時候幾乎寫完了,後來跑去全端實習,就擱置好幾個月,最近實習結束才把它結束
目前真的蠻多職缺要求要會 Vue 的,所以趕緊摸一個出來
但我還是比較喜歡 React 就是了


這個專案有用到 Vue 的狀態管理工具 Pinia

雖然我知道現在的主流... React 是 Redux、Vue 是 Vuex
但已經有同等優秀且更容易使用的新星問世
或許現在上手難易度已經有所改善了,不過我當初翻閱 Redux 文檔5分鐘後的第一件事情,就是開始查找其他的 lib,一個第三方函式庫會那麼艱深有點不對勁,畢竟我明明是在找工具?
所以 React 我學了 Zustand、Vue 我學了 Pinia,哈哈


來個範例吧!

建立一個「store」:
store 感覺有點像一個 "倉庫" ,引入狀態的元件都去 store 那裏拿內容

元件引用狀態:

就... 就這樣,結束了,這根本超級易用的啊!

其實 repo 內可以看到我當時使用了比較舊一點的 Vue2 Options API
5個月後我發現有更簡化的寫法:Vue3 Composition API ,且 Composition API 還有在持續進化
<script setup> 取代 export default  直接在區塊中定義狀態和方法
至此它已經跟寫一般的 JS 沒什麼兩樣了
我覺得就是得這樣才行呀,不然每個工具都有自己的特殊格式,還蠻令人頭痛的

我應該會邊寫這篇文章覆盤,邊改 code 統一寫法,畢竟是要放作品集的東西... 不能太雜亂


貼文內容是 Lorem Ipsum,每個用戶會生出這種意味不明的繁體中文貼文
隨機用戶資料則是 Randomuser.me,每次都會叫20筆資料,迎合陌生人萍水相逢的設定


然後 gh-page 真的超難搞,架好之後3小時也噴了,到底是怎樣喔氣氣氣氣
首先 vite.config.js

我的 repo 名稱叫 "Vuetter"
而我也預計它的網址是要長這樣: https://determinationlove.github.io/Vuetter/
所以就要設定成 "/Vuetter/"

還有很經典的 gh-page 路由問題,一定要用 hash

Github Action Workflow 可以看一下這裡


寫這個大概花4天左右吧,很快
哈哈,現在我可以在履歷裡寫自己有 Vue 經驗了

創作回應

栗悟飯與龜波功
厲害
2023-10-06 10:16:18
燐火幽冥
0... 這程度還說不上是有什麼複雜度
2023-10-06 12:01:30

更多創作