如何將 Binary 轉成 Base64 String ?
一般 API 對於圖片都會回傳 Base64 String，若 API 是回傳 Binary 呢 ? 此時我們就得自行 Encode 成 Base64 String 在才能顯示圖片。
タグ : Vue
在 URI 前面加上 Prefix
Vue 在 Development 階段都是 /，但在 Production 階段配合 Reverse Proxy 則可能有所改變，如變成 /portal，該如何簡單的設定呢 ?
Vuex 之使用 Higher Order Function 建立 Mutation
實務上在寫 Vuex 時，由於 State 的修改都必須依賴 Mutation，因此 Mutation 寫出來的 Code 都相當類似，此時可以建立 genMutation() Higher Order Function，專門負責建立 Mutation。
如何使用 FP 風格開發 Vue ?
Vue 若要使用 OOP 風格開發，可以使用 Class Component，還可搭配 TypeScript，Vue CLI 預設已經整好環境。Vue 原本風格，介於 OOP 與 FP 之間，沒使用 class，但卻大量使用 this，這仍是 OOP 產物，若要更具 FP 風格，可以參考本文方法。
使用 Webpack Loader 將 GraphQL Query 獨立出來
雖然 Vue 允許我們在 ECMAScript 內以 String 定義 GraphQL Query，但實務上 Query 會相當複雜，比較好的方式是拆成獨立的 *.graphql 方便維護。
使用 Vue Apollo 建立 Simple Subscription
GraphQL Subscription 並不是一定得搭配 GraphQL Query，有時只想單純接收 Subscription 的回傳值，此時可使用 Vue Apollo 所提供的 Simple Subscription。
使用 Vue Apollo 建立 Dynamic Subscription
Smart Query 與 Smart Subscription 雖然方便，但必須在 apollo 先宣告 Query 也順便定義其 GraphQL，且在 Component 載入時自動執行；若想在某個 Event 下執行 GraphQL，則要改用 Dynamic Query 與 Dynamic Subscription 動態載入 GraphQL。
使用 Vue Apollo 建立 Smart Subscription
GraphQL Subscription 最常使用的場景為原本 Smart Query 已經有資料，但經過 Subscription 通知後需更新原本資料，Vue Apollo 特別設計了 Smart Subscription，可在完全不知道 WebSocket 前提下，不知不覺使用 GraphQL Subscription。
使用 Babel 打造 GraphQL Fullstack 開發環境
Vue CLI 已經基於 Babel 建立，但 Apollo GraphQL 則使用原生 Node，本文將以 Vue Apollo + Apollo GraphQL + Babel 打造 GraphQL Fullstack 開發環境。
使用 ESLint 檢查 GraphQL
只要在 Vue Project 下安裝 Vue Apollo 之後，yarn serve 就會提示是否讓 ESLint 也檢查 GraphQL，只要依照本文步驟，就能消除 Warning 並檢查 GraphQL。
使用 Skip Query 避免 Smart Query 一開始就執行
Vue Apollo 的 Smart Query 以 Declarative 本意很好，且不需 mounted hooks 就可自動執行，但若需求不希望 Component 一開始就執行 GraphQL 呢 ?
使用 Vue Apollo 建立 Reactive Parameter Query
實務上有時我們會將 GraphQL Query 的 Argument 綁定到 Vue 的 data，讓 data 一改變就自動重新執行 GraphQL Query，此時必須使用 Vue Apollo 所提供的 Reactive Parameter Query。
使用 Vue Apollo 建立 Dynamic Query
Vue Apollo 預設使用 Smart Query，在 apollo 先宣告 Query 也順便定義其 GraphQL，在 Component 載入時自動執行；若想在某個 Event 下執行 GraphQL，則要改用 Dynamic Query 動態載入 GraphQL。
如何將資料 Binding 到 GraphQL ?
Vue 在 HTML Template 的資料都會 Binding 到 data property 下，若想將該資料也 Binding 到 GraphQL 下該如何做呢 ?
使用 Vue Apollo 建立 Variable
GraphQL 的 Query 支援 Argument，而 Argument 在 Vue Apollo 亦可使用 Variable 提供。
GraphQL 初體驗
GraphQL 為 Facebook 所發表 API 查詢語言，在 2018 年成立 GraphQL Foundation 後，各語言的後端與前端都有 GraphQL 實作，本文將對 GraphQL 做簡單介紹，並以 Apollo 平台建立基本 GraphQL 開發環境。
如何以 Vue + Node 實現 Microservice ?
若要使用 Microservice 架構，則會各自將 Vue 與 Node 包成 Docker Image，然後使用 Docker Compose 一次啟動 Vue 與 Node，此時 Node 會包在 Docker 內部網路，Vue 所需的 HTTP Service 與 Reverse Proxy 也能繼續由 Node 提供。
如何以 Vue + Nginx + Node 實現 Microservice ?
若要使用 Microservice 架構，則會各自將 Vue 與 Node 包成 Docker Image，然後使用 Docker Compose 一次啟動 Vue 與 Node，此時 Node 會包在 Docker 內部網路，Vue 需使用 Nginx 的 Reverse Proxy 才能連上 Node。
如何對 Getter 加以 Point-free ?
Vuex 的 Getter，其 State 與 Getter 都是以 Object 傳入，因此特別適合使用 Ramda 的 useWith() 使 Getter 加以 Point-free。
使用 Vue-socket.io 連接 WebSocket
若要在 Vue 使用 WebSocket，Vue-socket.io 提供了更簡易方式，只要在 Vue Instance 下的 sockets property 宣告與 event 同名的 function，即可在該 function 下實作 event handler。
如何在 Safari 使用 Vue DevTools ?
Vue 在 Chrome 提供了 DevTools Extension，讓我們方便 Debug Vue，Vue 官方另外提供了 Electron 版 DevTools，讓我們在 Safari 也能開發 Vue。
Vue Router 之 History Mode
目前我們在 Vue 的網址都會看到有 #，因為 Vue Router 預設使用 Hash Mode，若要拿掉 #，就要使用 History Mode。
Vue Router 之 Props
雖然我們可以使用 this.$route 去存取目前 Route，但開發 Component 時，你無法確認 User 是否使用 Vue Router，畢竟 Vue Router 是選配，也無法確認會用什麼 Params 或 Query String，比較好的方式還是回歸 Component 正統設計方式：使用 Props。
Vue Router 之 Named Routes
實務上我們不希望 <router-link/> 直接綁定到 Route，這樣將來 Route 改變時，會所有 <router-link/> 都要改，而希望綁定到 Name，這樣將來 Route 改變時，只要統一修改 route.js 即可，而不用每個 HTML Template 都修改。
Vue Router 之 Dynamic Route Matching
在實務上 Route 也會如 Restful API 一樣，動態在 Route 中夾帶 Data，此時可使用 Dynamic Route Matching，而不用將 Route 寫死。
Vue Router 基礎概念
Vue 雖然由 Component 所構成，為了模擬出不同頁面有不同網址，Vue 官方也提供了 Vue Router，這是前端自己的 Route，有別於後端的 Route。
如何在 Axios 存取使用 Basic Auth 的 API ?
某些採用 Basic Auth 的 API，必須在 Header 提供帳號密碼才能取取，這該如何在 Axios 使用呢 ?
