搞搞就懂

使用 Vue 與 Cordova 進行 app 開發，並且部署到虛擬器及實體手機進行測試。

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

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

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

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

在填寫多步驟式的表單資料時，若需要在回上一步後顯示先前填寫過的資料，可以使用 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 來闖蕩前端世界吧