練習用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天左右吧，很快
