搞搞就懂

本文說明如何在 SPA 網站中加入 Google Tag Manager (GTM) ，並且透過 GTM 將資料收集至 Google Analytics (GA) 來追蹤網站內各頁面的訪問流量。

透過 webpack 打包後的檔案為靜態頁面，所以只要能通過 HTTP 訪問到該頁面就夠，其中唯一可能發生問題的就是路徑問題，這牽涉到 webpack 的設定需要與其搭配；另外當 Router 是使用 History 模式時，就需要透過 web server 設定來執行 url rewrite 機制，確保訪問到正確的檔案。

本文將介紹 Vuex 的使用方式 ( 模組化 Store )，並且利用 Vuex 掌握全站讀取中的 web api 數量狀態，自動依據該狀態來自動呈現 loading 互動效果。

網站上線前一定會歷經各個測試環境 (sit / uat) 的試煉，因此需定義出符合各環境的各項參數值，本文提供兩種方式來搭配使用，應可符合絕大多數需要調整環境參數的情境。

針對第三方套件使用的合宜性來進行審視，並透過 async component 與 webpack 代碼分割功能來實現 Lazy Loading Routes 機制，讓打包後產出的 bundle 檔案能依照各頁面需求載入所需的代碼。

筆者在套用語系時，習慣將該 key 值對應的中文語系文字當作註解一併插入，但語系文字會經常被調來調去，此時註解在畫面的文字就會有不同步的情況；本文透過 C# 實作一個同步語系文字的工具，讓「語系檔」與「語系套用註解」永遠保持一致的狀態。

在填寫多步驟式的表單資料時，若需要在回上一步後顯示先前填寫過的資料，可以使用 keep-alive 標籤包裹，讓指定的步驟組件狀態被快取，輕鬆完成這類需求。

表單驗證是每個網站必備的工作項目，本文使用 vee-validate 實作表單驗證，並搭配 vue-i18n 語系檔來打造友善的多語系錯誤提示環境。

要讓網站也可以提供給外籍人士使用，不可免俗的需要多國語系的支援，因此本文透過 vue-i18n 來打造一個多國語系網站，並介紹基本的使用情境及用法。

當多數組件中有共同方法及物件是會被經常使用到的時候，絕對會希望抽出成獨立的方法讓所有組件重複使用，因此 Vue 提供幾個不同的方式來發便開發人員建立複用的機制，可以依照需求特性選擇作法。

vue-router 為了方便我們連結特定路由，因此提供 router-link 組件供我們使用；其原理就是透過設置，將這些傳入的 path 或路由名稱轉換為 a 元素，並且在路由匹配時給予 router-link-active class 於元素中，標記目前正在該連結點中。

先前的介紹都針對單頁面功能進行說明，但網站是透過許多頁面組件相疊而成，需要一個規則讓用戶訪問到確切目標，本篇就針對 vue-router 路由設定進行介紹。

我們都知道 vuex 可以幫助我們統一管理狀態，但是若情況沒有這麼複雜或專案規模不大的時候，是可以考慮使用 event bus 來作為組件溝通的橋樑。

Vue 與 React 的概念都是先針對頁面拆分組件化來進行開發，最後再將所有組件合成為我們所需的功能，而組件溝通存在許多種方式及淺在問題，開發人員可以依照需求自行搭配使用，而本篇來研究一下基本的父子上下層的基礎溝通方式。

到目前為止真的只是利用 vue-cli 建立個前端開發環境，先前花了幾篇文章說明前端種種機制 webpack, eslint, npm .... 等，接著我們就來一同了解 Vue 相關所需具備的基本知識吧！

透過 toastr 統一訊息輸出方式

讓系統訊息顯示具有美觀及一致性的呈現

了解如何套入 Bootstrap 至前端開發環境

從 webpack 的 Entry Point 引入 Bootstrap js 及 scss 資源模組

透過 Vue-cli 建構專案

略過相關套件(webpack, ESLint, babel)繁雜的設定過程

前端世界到此時此刻為止可說是三足鼎立，就是 React、Angular 及 Vue 三套相當熱門優秀的前端框架，而隨著 Vue 2.0 的發布及各項考量後，這次就選擇 Vue 來闖蕩前端世界吧