0.前言
先聊一下前端開發模式的發展。
靜態頁面
最初的網頁以HTML為主，是純靜態的網頁。網頁是只讀的，信息流只能從服務端到客戶端單向流通。開發人員也只關心頁面的樣式和內容即可。
異步刷新，操作DOM
1995年，網景工程師Brendan Eich 花了10天時間設計了JavaScript語言.
隨着JavaScript的誕生，我們可以操作頁面的DOM元素及樣式，頁面有了一些動態的效果，但是依然是以靜態為主。
ajax盛行：
- 2005年開始，ajax逐漸被前端開發人員所重視，因為不用刷新頁面就可以更新頁面的數據和渲染效果。
- 此時的開發人員不僅僅要編寫HTML樣式，還要懂ajax與后端交互，然后通過JS操作Dom元素來實現頁面動態效果。比較流行的框架如Jquery就是典型代表。
MVVM，關注模型和視圖
2008年，google的Chrome發布，隨后就以極快的速度占領市場，超過IE成為瀏覽器市場的主導者。
2009年，Ryan Dahl在谷歌的Chrome V8引擎基礎上，打造了基於事件循環的異步IO框架：Node.js。
- 基於事件循環的異步IO
- 單線程運行，避免多線程的變量同步問題
- JS可以編寫后台代碼，前后台統一編程語言
node.js的偉大之處不在於讓JS邁向了后端開發，而是構建了一個龐大的生態系統。
2010年，NPM作為node.js的包管理系統首次發布，開發人員可以遵循Common.js規范來編寫Node.js模塊，然后發布到NPM上供其他開發人員使用。目前已經是世界最大的包模塊管理系統。
隨后，在node的基礎上，涌現出了一大批的前端框架：
MVVM模式
- M：即Model，模型，包括數據和一些基本操作
- V：即View，視圖，頁面渲染結果
- VM：即View-Model，模型與視圖間的雙向操作（無需開發人員干涉）
在MVVM之前，開發人員從后端獲取需要的數據模型，然后要通過DOM操作Model渲染到View中。而后當用戶操作視圖，我們還需要通過DOM獲取View中的數據，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封裝起來，開發人員不用再關心Model和View之間是如何互相影響的：
- 只要我們Model發生了改變，View上自然就會表現出來。
- 當用戶修改了View，Model中的數據也會跟着改變。
把開發人員從繁瑣的DOM操作中解放出來，把關注點放在如何操作Model上。
而我們今天要學習的，就是一款MVVM模式的框架：Vue
1.認識Vue
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
前端框架三巨頭：Vue.js、React.js、AngularJS，vue.js以其輕量易用著稱，vue.js和React.js發展速度最快，AngularJS還是老大。
參考：https://cn.vuejs.org/v2/guide/
Git地址：https://github.com/vuejs
尤雨溪，Vue.js 創作者，Vue Technology創始人，致力於Vue的研究開發。
2.Node和NPM
前面說過，NPM是Node提供的模塊管理工具，可以非常方便的下載安裝很多前端框架，包括Jquery、AngularJS、VueJs都有。為了后面學習方便，我們先安裝node及NPM工具。
2.1.下載Node.js
推薦下載LTS版本。
課程中采用的是8.11.3版本。也是目前最新的。大家自行下載或者使用提供給大家的安裝包。然后下一步安裝即可。
完成以后，在控制台輸入：
node -v
看到版本信息：
2.2.NPM
Node自帶了NPM了，在控制台輸入npm -v查看：
npm默認的倉庫地址是在國外網站，速度較慢，建議大家設置到淘寶鏡像。但是切換鏡像是比較麻煩的。推薦一款切換鏡像的工具：nrm
我們首先安裝nrm，這里-g代表全局安裝。可能需要一點兒時間
npm install nrm -g
然后通過nrm ls命令查看npm的倉庫列表,帶*的就是當前選中的鏡像倉庫：
通過nrm use taobao來指定要使用的鏡像源：
然后通過nrm test npm 來測試速度：
注意：
- 有教程推薦大家使用cnpm命令，但是使用發現cnpm有時會有bug，不推薦。
- 安裝完成請一定要重啟下電腦！！！
- 安裝完成請一定要重啟下電腦！！！
- 安裝完成請一定要重啟下電腦！！！