Jain's 學習之路

今年的 iT邦幫忙鐵人賽中剛好就有位鐵人利用了 30 天的時間，天天一篇文章從頭到尾來介紹 vue.js 的基礎教學，這真的是太佛心來了，在此記錄一下也方便以後有需要的時候可以直接取得相關的訊息. vue & vuex 01 - Vue Introduction & 鐵人賽說明 vue & vuex 02 - 使用 Vue-cli 安裝 vue 和 webpack 環境與相關套件 vue & vuex 03 - Hello World & 雙向綁定 vue & vuex 04 - 使用 vue-router 建構 Single Page Application vue & vuex 05 - 攝氏轉換華氏工具 - I (computed) vue & vuex 06 - 攝氏轉換華氏工具 - II (v-if, v-show, methods) vue & vuex 07 - component - I (元件拆解，合併，靜態資料引用) vue & vuex 08 - component - II (v-for 小幫手解決重複元件) vue & vuex 09 - component - III (slot 在元件上鑽洞) vue & vuex 10 - 什麼是 vuex? vue & vuex 11 - 計數器 - I (vuex 職權與流程說明) vue & vuex 12 - 計數器 - II (action, mutation 傳遞資料) vue & vuex 13 - 經典 todo list - I (create, read) vue & vuex 14 - 經典 todo list - II (改變狀態與 delete) vue & vuex 15 - 經典 todo list - III (update) vue & vuex 16 - 自訂按鈕 custom checkbox ($emit, $on) vue & vuex 17 - 覺得 store 有點亂，動手拆成 modules 吧！ vue & vuex 18 - 開發小技巧 vue ...

在看到 Router 時也是第一次接觸到 SPA (Single Page Application) 這個名詞 . 簡單的說就是把 Web Application  變成是 Desktop Application 來開發. 基本上傳統的 Web Site 採取多頁式 ( Multi-Page ) 做法，而是如何把 UI 從 Server-side 移到 Client-side，資料的部份整合 REST API ，做到真正的前後端分離. Router 的工作就是為了把 Server 的路由變成是 Client 端，頁面的切換全部交給 Client 來處理. vue 在 init project 時會詢問是否要使用  vue router library，在建立 project 時幫你加入 router 的功能.這個檔案就是在配置路由來取代 hyperlink 回 Server 的部份. 試著修改路由的配置及加入 element-ui 的 NavMenu 的 library 做過簡單的範例. 首先在其 components folder 中加入 SayHi.vue，做其簡單的輸出. 再來修改 router folder 中的 index.js，定義 Path 所要載入的 component 組件( UI ) 為何. 最後修改 App.vue，加入 router-view 這個 Tag，來定義所要顯示的區域 . 最基本的  router 功能就完成. 來看一下最後的畫面.

雖然已成功使用 element-ui 來開發，但其 build 出來的 file size 還真的有夠大. 再來就依官網所說的使用 babel-plugin-component 來減少 file size . 使用 npm 來按裝 babel-plugin-component. 再來修改  main.js 重點是 .babelrc 這個 file，我依官網的來修改在執行時會有錯誤訊息，可能是版本新舊的關係，故做點小修改才沒有錯誤訊息. 比較一下使用 babel-plugin-component 前後 build 出來的 file size 二者的差異，檔案的大小對瀏覽器載入的時間是正相關啊．

工欲善其事，必先利其器，awesome-vue ( https://github.com/vuejs/awesome-vue )幫我們收集了很多的關於 Vue.js 的 resource ，有好的材料當然也要配上好的料理才行. 在選取技術最重要的不外乎 resource 的多寡，當有問題時可以取得解答和大量的 component 可以加速你的開發是我列入選取的重要選取條件之一. Vue.js 的 UI Framework 的部份我選擇使用 Element 來當做我之後開發的 library.最快上手不外乎是官方文件 ( http://element.eleme.io/#/zh-CN ) . 接著之前的範例，加入其 Element library ，一樣透過 npm 來安裝 element-ui 接著在 main.js 中宣告使用 element-ui 最後修改一下 App.vue 來測試是否可正常執行. 執行畫面如下，可以看到  Button 可正常的顯示.

開始學 Vue.js 時，發現這幾年的 Web UI 真的變化很大. 由其是從 node.js 出來之後由其明顯.只好惡補一下 npm, webpack 這些技術好得以入門. 但其細節的設定還是要慢慢的深入.沒辦法一口吃不成胖子啊. 在寫 Vue.js 中其官方文件 ( https://cn.vuejs.org/v2/guide/installation.html ) 真的幫助很大.依官方文件步驟一個基本上的 vue project基本上的配置都幫你搞定了. 最後依其步驟執執行是否建立成功. 接著試修改一下其內容. 開始 App.vue file. 再來查看一下畫面，即可看到大大的 “ Hello World ”，第一個 vue project 完成了….