什麼是vue.js?這是官網的解釋。

    Vue.js（讀音 /vjuː/，類似於 view） 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層，它不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與單檔案元件和 Vue 生態系統支援的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供驅動。

   做為一個服務端開發者初學前端框架有些懵，定義很難理解，得了，那就先做出點可見的東西吧。本文就是搭環境和做一個測試demo,操作都是在windows命令視窗下進行的。

    node --version， 測試是否安裝成功，如圖，出現版本號就是成功了

  2.npm的安裝，其實新版本的node已經集成了npm，所以安裝成功node，就不用管這步了，為了保險，我們也測試下是否安裝成功

  3.執行 npm install -g cnpm --registry=https://registry.npm.taobao.org；

   我們做專案肯定要一些基礎的包，就如java中引用jdk或者別人開發好的jar包，而現在我們絕不會浪費時間去搜索，下載。就如同maven一樣，vue.js只要從網站下載就可以了，由於預設的npm連結的是國外的網站，速度慢，有的根本下載不成功，我們執行這條命令就可以直接執行 ”cnpm 包名稱”， 從國內淘寶映象下載，速度快，當然您也可以npm 包名稱，直接從國外的地址下載。

  4. npm install -g vue-cli

   這是安裝安裝vue-cil，vue-cil是vue的腳手架工具。構建vue專案用的。

   到這裡，vue的基本環境就可以了。

   我們進入想建立vue專案的地址，我這裡是d盤 vue資料夾下，執行vue init webpack vuetest，vuetest是

   我的專案名字，注意，不能有大寫字母 。執行過程中會有幾個選項，回車就行了。

   注意，到了Use ESLint to lint your code? (Y/n) 這個選項處，最好選n，如果選y，專案檢查你程式碼時，

   會把排版縮排不規範都算錯誤。如圖，

這是完成後

大家看到上圖，已經提醒我們怎麼做了，那就是cd vuetest，進入專案目錄，

下載需要的包，這個搭環境時提過用cnpm install，這個要費點時間，耐心等待下載完成就可以了

npm run dev是啟動專案。這三步我就不截圖了，執行npm run dev後，不用幹別的，瀏覽器會自動啟動 ，如圖

這樣，我們基本的一個專案就成功了。我們可以用webstorm（一個前端開發idea）開啟這個專案看看。

好了，這樣我們的基本開發環境就搭建完畢了，以後我們專注開發就可以了。像我這種入門級的開發就在src這個資料夾下開發就可以了。

我們開啟app.vue,這個vue模板就是我們剛才看到展示頁面的主要組成部分，如果你的webstorm最底部出現這個

可以如圖這麼做，選擇node_modeles右鍵，如圖就可以了

我們看src資料夾，下幾個檔案，

assets是放靜態檔案的，

components就放.vue檔案的，也就是我們要開發的模板檔案，

router下的index.js是控制路由跳轉的，也就是配置哪個名字跳轉哪個模板。不懂以後隨著做專案就懂了。

app.vue和main.js啟動時載入的。

我們主要開發就是在components這個資料夾下。開啟新建專案自帶的hello.vue我們看下

看看其實就是html和js還有css。只不過js和html有一個響應式的連通。js裡定義了msg（圖一）變數，

在這個頁面中html通過兩個大括號引用它（圖二），

這樣，通過這個msg變數，js和html就動態的連通了，通過js改變msg的值，html也會跟著自動改變，

這就是所謂的響應式。比jquery要高階吧？jquery還要通過選擇器找到元素去改變它。

圖一

圖二

現在我們的msg 定義是Welcome to Your Vue.js App（圖一），所以初始頁面也是這個（啟動時初始頁面，上面我已截圖了）。

我們把它改成hello world，如圖

這時，你會發現，我們的頁面localhost:8080,已經顯示hello world了。如圖