vue3 + pinia 狀態管理新手教學

,

還記得我們在vue2 的時代，最紅的狀態管理套件是 vuex；隨著 vue3 的發展，許多的套件也隨大家撰寫 Composition API 的使用習慣跟著做相應的調整。

閱讀更多
0
/0 評論/通過：

如何使用 vite + vue3 建立一個新專案？

, ,

vite 是最近越來越流行的建立前端專案的手腳架，為什麼他會這麼流行呢？

  1. 快速的開發環境
  2. 即時重整
  3. 模組化開發
  4. 支援多種框架：vue、react…
  5. TypeScript 支援

結論：使用 Vite 可以帶來更快的開發速度、更好的性能，並提供了靈活的配置選項，使其成為一個吸引人的選擇。

當然安裝這些套件還要視每個人的需求來選擇，例如：一頁式網站可能就不需要安裝 router；形象網站不打 api 就不需要安裝 axios 等等。

閱讀更多
0
/0 評論/通過：

如何使用 docker 部署 vite + react 靜態網站？

, , ,

使用 create react app 或是 vite 部署 react 靜態網站的方式其實很類似，主要的差別就是在 vite.config.js 裡面的寫法。

閱讀更多
0
/0 評論/通過：

如何捕捉 android chrome 上的 enter 回車鍵？

, ,

不知道大家有沒有遇過，假設你的一個頁面上有不只一個 input，那麼你在 android 裝置上的 chrome 輸入好內容後，直接按下軟鍵盤的 enter(回車鍵)，他竟然就自己跳到下一個 input 並且 focus 在那裡…

閱讀更多
0
/0 評論/通過：

如何使用 vite + react 建立一個新專案？

, ,

使用vite 建立一個react 專案，通常會搭配哪些套件呢？

  1. vite + react
  2. mui (material ui)
  3. react-router-dom v6
  4. zustand 狀態管理
閱讀更多
0
/0 評論/通過：

如何使用nginx部署前端靜態網站？

, ,

這篇會使用到 Google Cloud Platform (GCP) 的 computed engine ，其實部署前端靜態網站最快的方式是用 Docker + GCP cloud run ，而且 cloud run 會給一個 https 的預覽網址。但是這次客戶要求只能先打 http 的 api ，所以只好自己用 nginx 放。

閱讀更多
0
/0 評論/通過：

如何在 Mac M2 芯片安裝 gcloud CLI？

,

換了新電腦，之前的電腦是intel晶片，現在換的是M2，處理器架構不一樣了，安裝很多東西都要先看一下這些軟體有沒有影響。

重新安裝 Google Cloud CLI ，官網文件點這裡

閱讀更多
0
/0 評論/通過：

React 如何在上傳圖片時顯示進度條？

, ,

呼叫api上傳圖片時候如果要顯示進度條，目前有兩種方式可以加入偵聽事件，

  1. 使用js原生的 XMLHttpRequest
  2. 使用axios

其實axios也只是把偵聽事件的名稱改掉而已，背後做法應該是一樣的ＸＤ

閱讀更多
0
/0 評論/通過：

React 如何使用前端Post方法串接電子地圖？

, ,

我們在串接綠界資訊的時候，遇到一個問題就是綠界的文件上寫，此方法要使用前端的post方法，但是我用call api的post方法去打，卻回應跨域錯誤，寫信綠問綠界，又一問三不知～

好在後來終於被後端工程師提醒才明白，在上古時期的網頁開發是沒有分前後端的，所以post方法都是用<form>標籤去做，我整個大開眼界欸，雖然還不懂這其中的差別，但總歸是成功了。

閱讀更多
2+
/1 評論/通過：

React 如何打開裝置相機鏡頭拍照，並儲存照片？

, ,

網頁需要用到相機的場景還滿多的，像是身份驗證需要拍證件照上傳、發文、留言，是很基本的網頁應用。

閱讀更多
1+
/0 評論/通過：