在上一篇文章中，大致介紹了一下本系列博文以及學習vuejs我們需要了解的一些概念，希望大家認真閱讀，所謂知己知彼，百戰百勝，學習也一樣，工欲善其事，必先利其器，要想學好vuejs，那前提的概念一定要熟悉。否則在接下來的博文中，遇到一些概念很有可能理解不了。
由於不能翻牆，所以之下大部分的操作都是在國內的網站里進行下載或是用的國內代理。
安裝NodeJs
下載Node.js，在這里我用的是Node中文網http://nodejs.cn/下載。大家可以按自己電腦的系統來下載不同版本的Node。
關於Linux和Mac安裝Node，這里不過多的說明，畢竟本人實在是窮屌絲一個，沒人用Mac。
安裝Node.js其實特別簡單，就是一路Next。在安裝的過程中，安裝目錄建議不要包含中文，避免不必要的麻煩。安裝完成之后，在cmd命令行中輸入以下命令來查看Node.js的版本：
如果出現以上結果，則表示安裝成功。（注：上圖中的版本號為8.9.0，在實際安裝過程中不一定和我一樣）
安裝vue-cli腳手架工具
使用win+r快捷鍵打開命令行（cmd），輸入以下命令
npm install -g vue-cli
注：
npm：Node的包管理器
install：安裝命令
-g：參數，表示在全局進行安裝，將來在任何地方都可以使用
vue-cli：安裝包的名稱
在這里介紹一下npm命令，NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：
1、允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
2、允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
3、允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。
由於新版的nodejs已經集成了npm，所以之前npm也一並安裝好了。同樣可以通過輸入 "npm -v" 來測試是否成功安裝。命令如下，出現版本提示表示安裝成功。
安裝完vue-cli后，執行vue -V（這里的v是大寫），如下圖
構建第一個項目
1、為項目創建一個目錄
首先我們要創建一個目錄，該目錄的作用是放我們將來開發的所有項目，比如把項目統一都放在D:/vueworks/目錄中，所以使用如下命令來進行創建並進入到該目錄。
d: //切換到d盤 mkdir vueworks //創建名稱為vueworks的目錄作為放置項目的目錄 cd vueworks //進入到該目錄
2、利用webpack初始化項目
vue init webpack my-vue
至此，我們用剛剛安裝的 vue-cli 腳手架命令 vue ，初始化 init 一個以 webpack 為模板的名叫 my-vue 的項目。
這里解釋一下這些提示，如下
? Install vue-router? (Y/n)
問是不是需要安裝 vue-router ，需要安裝，這個是管理路由的。我們直接回車。
出現這樣的選項，默認選項一般會是大寫，如上 (Y/n) 就表示直接回車，將代表同意，如果你看到了 (y/N) 這樣的，就表示，默認選擇的是否，這時候，就需要輸入 y 然后回車。當然，前提是你決定要這樣做。
3、初始化依賴包
初始化依賴包因為需要聯網，並且是去連 github ，如果你沒有翻牆的話，可能速度會比較慢。我們可以使用國內淘寶提供的 npm 鏡像源來進行安裝，解決翻牆的問題。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完成之后，則可以安裝依賴包了：命令如下
cnpm install cnpm run dev //以開發模式運行項目
如果出現如下圖提示，則表示運行成功，可以打開瀏覽器輸入以下的網址進行預覽了。
如果瀏覽器打開和我一樣，則表示Node.js和vue-cli構建的項目已經完全沒有問題了，你的第一個vue項目已經順利跑起來了。
附錄：
? Vue build (Use arrow keys) ❯ Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
這里是問你，需要不需要安裝編譯器，我們選擇需要安裝，也就是第一個，也就是直接回車就OK了。
? Install vue-router? (Y/n)
問是不是需要安裝 vue-router ，需要安裝，這個是管理路由的。我們直接回車。
? Use ESLint to lint your code? (Y/n)
是否需要使用 ESLint 來檢查你的代碼。我們不需要！
? Pick an ESLint preset (Use arrow keys) ❯ Standard (https://github.com/feross/standard) Airbnb (https://github.com/airbnb/javascript) none (configure it yourself)
然后問你需要使用哪種風格來檢查你的代碼。我們選擇No
? Setup unit tests with Karma + Mocha? (Y/n)
是否需要安裝測試功能。不要。我們輸入 n 然后回車。
? Setup e2e tests with Nightwatch? (Y/n)
還是關於測試的內容，我們還是輸出 n 然后回車。
更多關於ESLint的檢查請參見：http://hongfanqie.github.io/standardjs/