我們在前端學習中，學會了HTML、CSS、JS之後一般會選擇學習一些框架，比如Jquery、AngularJs等。這個系列的博文是針對於學習Vue.js的同學展開的。

　　1.如何簡單地使用Vue.js

　　如同以前我們學過的Jquery一樣，我們在程式中使用Vue.js時也可以使用直接引用的方法，直接下載並用 <script> 標籤引入，Vue.js會被註冊為一個全域性變數。在這裡有一個重要提示：在Vue.js的官網有兩個版本，開發版本和生產版本，我們在開發時應用開發版本，遇到常見錯誤它會給出相應的警告。

　　當然，和Jquery一樣，Vue.js也可以使用CDN的形式引用在程式碼當中。在bootcdn網站中直接複製程式碼貼上就可以了，簡單方便。

　　2.vue環境搭建

　　我們在用 Vue.js 構建大型應用時推薦使用 NPM 安裝， NPM 能很好地和諸如 Webpack 或Browserify 模組打包器配合使用。 Vue.js 也提供配套工具來開發單檔案元件。

　　Vue.js的推薦開發環境為Nodejs。npm:為Nodejs下的包管理器。由於國內使用npm會很慢,這裡推薦使用淘寶NPM映象（其網址為http://npm.taobao.org/）。我們使用webpack進行資源的合併和打包以及使用vue-cli進行使用者生成Vue工程模板。

　　那麼，我們著重的講解一下如何搭建一個合適的環境。

　　（1）如何安裝Nodejs

　　開啟Nodejs的官網（https://nodejs.org/en/），我們可以在頁面最中間看到Download這個詞，選擇對應的版本下載即可，建議下載後一個版本。也可以選擇下面的Other Downloads下載其他版本和Mac的版本。

　　下載完成後，使用傻瓜式安裝即可。安裝完成後可以先進行下簡單的測試安裝是否成功了，後面還要進行環境配置。在鍵盤按下【win+R】鍵，輸入cmd，然後回車，開啟cmd視窗，輸入node -v和npm -v即可顯示當前安裝的版本號，即表示安裝成功。新版的Node.js已自帶npm，npm的作用就是對Node.js依賴的包進行管理，也可以理解為用來安裝以及解除安裝Node.js需要裝的東西。

　　（2）安裝cnpm

　　由於有些npm有些資源被遮蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，因此要麼FQ要麼就使用國內映象cnpm。開啟https://npm.taobao.org/，我們可以瞭解到這是一個完整npmjs.org 映象，可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。

　　同樣在命令列中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然後等待。

　　安裝完成之後，我們輸入cnpm -v檢測，當顯示下圖時為安裝成功。

　　（3）安裝vue-cli

　　vue-cli是一種全域性腳手架用於幫助搭建所需的模板框架，同理在cmd中輸入命令:npm install -g vue-cli。在這一段程式碼中-g是為了全域性使用的意思。與cnpm樣，安裝完成後會顯示一長串的檔案，輸入 vue -v可以檢視vue版本。此時，環境已經基本搭建成功。

　　（4）測試，建立第一個Vue.js專案

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

　　此處以及以後的設定可以輸入，也可以直接按回車和N。

　　這樣，第一個Vue.js專案就建立完成。開啟相應的儲存地址就會看到這個檔案，我的放在可user/倫倫/的下面。

　　通過輸入cd  my-first-demo就可以進入目錄具體資料夾命令列中輸入：cnmp install或者npm install安裝依賴包。重新開啟路徑下的資料夾，我們可以看到資料夾中比之前的資料夾多了一個node_modules資料夾，到此腳手架安裝完成。

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

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

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