陣列中的物件，如何計算加總

,

我們通常家總會使用reduce來處理，但是如果你的陣列裡面是放物件，就要加上參數。

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

nginx 使用子網域部署多個網站

,

假設我有兩個網站，一個是site1，一個是site2，裡面各自放著網站資料並且有各自的index.html。

現在我需要把他們放在同一個主機上，並且設定子網域：site1.domain.com、site2.domain.com。

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

純 css 實作類似Google表單浮動表單標題

,

Google表單通常都會有一種很酷表單標題效果，點到input時候原本在placeholder的標題就跑到左上角變成文字了，並且原本input的外框線也要斷開放進label。

看圖比較懂：

快速作法就是把label的背景設定成跟整個表單整體的背景顏色一致，這樣就定位focus的時候位移到上方就好。

但是！！如果背景是一張圖或是漸層呢？label的背景顏色就不能只是固定的單色了。

這時候我們就要做到真正的透明label。

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

react 使用 useContext 實現跨組件存取狀態

,

我們在傳狀態到子組件時最常用的就是props，但是如果我們的組件非常多層，不可能一層一層props傳下去，這時候就可以使用redux或是react useContext hook來實現。今天就是要來介紹：useContext。

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

element-plus 使用 svg icon

,

幾個月前，element plus要使用icon的話，都是用font icon的方式，但是這幾個月有段過渡期，官網說明會漸漸將font icon轉移到svg icon，使用方式也會不同。

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

vue3 使用 google map api

, ,

很許多api一樣，要使用的話要先創建帳號。

準備項目：

  1. 創建一個gcp帳號，並且建立一個專案project。
  2. 啟用google map api產生google map api key
  3. 創建一個vue3專案
閱讀更多
0
/0 評論/通過：

最新版本element plus 自訂主題 scss variables

,

最近將element plus 升級到最新版(1.1.0-beta.9)之後，發現之前設定的顏色變數竟然不起作用了。

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

gitlab cicd 部署前端專案(vue or react)至 gce

, ,

一般來說單純部署前端其實不需要起一個 vm 去放，只要使用 gcp 的container registry+cloud run就可以了。

但是因為這次接的案子，客戶提供的api僅能用沒有ssl的方式請求，而cloud run部署出來的入口是有ssl的，因此就只好用傳統的部署方式到vm上。

在開始之前，你必須要準備好以下幾件事：

  1. 創建一個gcp vm ，並安裝好nginx。
  2. 將專案放在gitlab上。
閱讀更多
0
/0 評論/通過：

yarn 安裝套件出現錯誤 Integrity check failed for “graceful-fs” (computed integrity doesn’t match our records…

,

記錄一下在新電腦clone專案，遇到的安裝套件問題。

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