Vue與現代前端工程 === ###### tags: `Vue` --- ## Technology Stack - 傳統前端架構：JQuery + RequireJS + doT + Gulp（or Grunt） --- ## 以土地資產管理系統為例 我們所用到的一一jQuery  --- ## 引入JS的部分...  --- ## 所以我們遇到了什麼問題？ ---- 1. JQ版本號改了，每個頁面有引入JQ的部分都要一個一個去手動更改！ 2. 引用順序如果不小心反了，就會出現問題（顯示跟隱式）。 3. JS沒有namespace的概念，故如果不同的JS變數名字一樣，在ES5（var的宣告）會造成變數的取代，因而產生混亂。（所以大多數Library的源碼都是採closure的方式去開發，避免污染，如JQ） ......等等其它。 ---- ## 所以我們需要模塊化！ #### 於是就出現了RequireJS，來解決上述所遇到的問題！ --- ## 接下來講講doT是什麼吧！  ----  ---- ## 它將Data 跟 Html tag關注分離！ 現代前端框架，都具備這樣的一種特性。 --- ## Gulp（Grunt） 前端自動化工程... 比如 打包部分：合併檔案、壓縮檔案、圖片優化。 開發部分：less編譯、監聽文件。 ......等。 --- ### **隨著開發時程不斷的縮短，開發需求不斷的增加，我們需要什麼？** --- 假設我們有一頭馬，當我們需求越多時，我們希望這頭馬一一 <!-- .element: class="fragment" data-fragment-index="1" --> 不但能載更多東西，還要可以跑得很快！ --- 所以我們可以努力培養一隻可以跑得更快的馬，來完成這些任務 又或者…… 我們可以換個角度，試試看一一 比如開車。 --- ### 歷史  --- ### Vue 特色： - 漸進式框架 - 關注點分離 - 數據驅動 - 組件化開發 - 雙向綁定 參考：https://cythilya.github.io/2017/05/21/vue-study-note/ ---