因為最近在做移動端html5的專案，專案中的資料渲染用的template,js ，這種模板的好處在於至少不用在js中去拼接字串來渲染頁面，但是缺點也很明顯，難以修改和格式化，並且會破壞編輯時頁面的佈局，需要做到很細的劃分，不然一旦頁面有所改變，真的改的頭疼。而現在頁面載入的時候一般都是從上往下按序載入，而使用template的時候每個模組都是使用ajax請求後臺資料填充模板後顯示，由於網路的不穩定性，有可能造成頁面並不是從上往下按序載入，出現頁面的跳動和閃爍。這就是我為什麼學習vue的原因之一。

開始搭建vue的環境，這裡我們跟隨潮流使用webpack。

1.安裝node.js

下載安裝node.js,

2.安裝vue-cli

現在在cmd中輸入vue看是否已經安裝過vue，出現如下圖所示就說明沒有安裝，

vue-cli 是一個官方釋出 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案

安裝 vue-cli ，在cmd中輸入命令： npm install -g vue-cli 這裡可能要等一段時間，安裝成功之後在cmd中輸入vue，當出現下圖所示則表示安裝成功了，

3.建立專案

建立專案，這裡我們使用webpack模板開生成專案，在cmd中輸入 vue init webpack  vuedemo  ,這裡要注意cmd的當前路徑，因為這個命令會在cmd當前的路徑下建立專案，vuedemo是專案的目錄名稱，安裝的時候會配置一些引數，可以根據自己的需要去修改，配置好之後也需要稍等一下。如圖：

建立成功之後如下圖：

紅框中標記的就是vue告訴我們該怎麼執行專案，在cmd中輸入這2個命令之後出現下圖所示：

在瀏覽器中輸入紅框中的url地址,一個牛逼的頁面就出現了啊

到這裡環境就搭建成功了，看一下vuedemo資料夾：

好了，第一節的學習就到這裡吧