一、簡介

Vue.js 是什麼

Vue.js（類似於 view） 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，並且非常容易學習，非常容易與其它庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單檔案元件和Vue生態系統支援的庫開發的複雜單頁應用。

Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

Vue.js是一個MVVM模式的框架，如果讀者有angular經驗，一定能夠很快入門Vue的

vue.js的特點:

易用： 已經會了HTML,CSS,JavaScript？即刻閱讀指南即可開始構建應用！

靈活： 簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。

高效： 16kb min+gzip 的執行大小,超快虛擬 DOM ,最省心的優化

二、環境搭建

vue推薦開發環境:

Node.js: javascript執行環境(runtime),不同系統直接執行各種程式語言

npm: Nodejs下的包管理器。由於國內使用npm會很慢,這裡推薦使用淘寶NPM映象（http://npm.taobao.org/）

webpack: 它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要釋出的靜態資源做相應的準備，比如資源的合併和打包。

vue-cli: 使用者生成Vue工程模板

安裝node.js

node.js下載並安裝，安裝過程很簡單，一路下一步就可以了（傻瓜式安裝）。安裝完成之後，開啟命令列工具在鍵盤按下【win+R】鍵，輸入cmd，然後回車，輸入node -v，如下圖，如果出現相應的版本號，則說明安裝成功。npm包管理器，是整合在node中的，所以，直接輸入npm -v就會如下圖所示，顯示出npm的版本資訊。

安裝cnpm

基於node.js,利用淘寶npm映象安裝相關依賴。由於國內使用npm會很慢,這裡推薦使用淘寶NPM映象。

命令：npm install cnpm -g --registry=https://registry.npm.taobao.org

完成之後，我們就可以用cnpm代替npm來安裝依賴包了。

安裝vue-cli腳手架構建工具

安裝全域性vue-cli腳手架,用於幫助搭建所需的模板框架

命令：cnpm install -g vue-cli

在這一段程式碼中-g是為了全域性使用的意思。與cnpm樣，安裝完成後會顯示一長串的檔案，輸入 vue -V可以檢視vue版本。

建立第一個Vue.js專案

在命令列中輸入：vue init webpack demo(專案資料夾名)。

第一個Vue.js專案就建立完成。開啟檔案放在C:\Users\Administrator\demo下面。通過輸入cd  demo就可以進入目錄具體資料夾然後在命令列中輸入：cnmp install或者npm install安裝依賴包。重新開啟路徑下的資料夾，我們可以看到資料夾中比之前的資料夾多了一個node_modules資料夾，到此腳手架安裝完成。

在命令列中裡輸入：npm run dev。

此命令會用熱載入的方式執行我們的應用，熱載入可以讓我們在修改完程式碼後不用手動重新整理瀏覽器就能實時看到修改後的效果。

這裡簡單介紹下 npm run dev 命令，其中的“run”對應的是package.json檔案中，scripts欄位中的dev，也就是 node build/dev-server.js命令的一個快捷方式。專案執行成功後，瀏覽器會自動開啟localhost:8080（如果瀏覽器沒有自動開啟，可以手動輸入）。執行成功後，會看到如下所示的介面。此時，任務完成。