我們在前端學習中，學會了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（如果瀏覽器沒有自動打開，可以手動輸入）。運行成功后，會看到如下所示的界面。此時，任務完成。
