詳細版：

一、nodejs的安裝

我們可以根據不同平臺系統選擇你需要的Node.js安裝包。Node.js 歷史版本下載地址：https://nodejs.org/dist/

這裡演示的是Window64位安裝Node.js，下面演示的是採用安裝包的方式來安裝。

1、Windows 安裝包(.msi)

 Node.js預設安裝目錄為 "C:\Program Files\nodejs\" , 你可以修改目錄，並點選 next（下一步）：

:點選 Install（安裝） 開始安裝Node.js。你也可以點選 Back（返回）來修改先前的配置。 然後並點選 next（下一步）：

 安裝完之後啟動cmd依次執行以下兩條命令檢測是否安裝成功，結果如下：

 二、node.js的環境變數的新建。  //我安裝的路徑是 D:\soft\nodejs

    其實安裝完node，就自動在path裡增加環境變數，但是為了以後的本地部署專案，我們需要找到node.js的安裝根目錄，在當中新建“node_global”和"node_cache"兩個資料夾。

1、 啟動cmd依次執行以下兩條命令

　　npm config set prefix " D:\soft\nodejs\node_global"
　　npm config set cache " D:\soft\nodejs\node_cache

2、 設定環境變數

　　說明：設定環境變數可以使得住任意目錄下都可以使用cnpm、vue等命令，而不需要輸入全路徑

　　1．滑鼠右鍵"此電腦"，選擇“屬性”選單，在彈出的“系統”對話方塊中左側選擇“高階系統設定”，彈出“系統屬性”對話方塊。

　　2．點選環境變數彈出下列對話方塊：

　　3．新增系統變數NODE_PATH：把變數值設定成“D:\soft\nodejs\node_global\node_modules” （這樣就可以把後面全域性安裝的裝到global裡並且可以直接用命令使用。）

4． 修改使用者變數PATH：選中PATH，點選編輯，把“D:\soft\nodejs\node_global;”加到前面

三、安裝淘寶的npm映象

　　輸入npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安裝npm映象，以後再用到npm的地方直接用cnpm來代替就好了。

　　這個其實看個人愛好吧，因為npm在國內下載速度是很慢，所以就用npm下載安裝cnpm可以更快的下載後面的依賴等等。

四、安裝全域性vue-cli腳手架、webpack

命令輸入

　　cnpm install vue –g  //全域性安裝vue

 　cnpm install -g vue-cli                        //全域性安裝vue-cli

　　cnpm install -g webpack                          //全域性安裝webpack

       cnpm install -g webpack-dev-server             //安裝webpack的本地webserver

　　安裝完成後，vue-cli腳手架其實就已經把vue也裝掉了，所以只需輸入vue  -V 和 webpack  -v  等等就可以檢視安裝成功與否。

 下面是以上命令的結果:

$ npm install vue -g

E:\nodejs\node_global
`-- [email protected]


$ npm install -g vue-cli

E:\nodejs\node_global\vue-init -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
E:\nodejs\node_global\vue-list -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
E:\nodejs\node_global\vue -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue
E:\nodejs\node_global
`-- [email protected]
  +-- [email protected]
  | `-- [email protected]
  +-- [email protected]
　.....  此處省略很多結果資料 .....


$ npm install webpack -g

E:\nodejs\node_global\webpack -> E:\nodejs\node_global\node_modules\webpack\bin\webpack.js
> [email protected] postinstall E:\nodejs\node_global\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
E:\nodejs\node_global
`-- [email protected]
  +-- [email protected]
  +-- [email protected]
 .....此處省略多行資料.......
  
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})


$ npm install -g webpack-dev-server

E:\nodejs\node_global\webpack-dev-server -> E:\nodejs\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js
E:\nodejs\node_global
+-- UNMET PEER DEPENDENCY [email protected]^2.2.0 || ^3.0.0
`-- [email protected]
  +-- [email protected]
  +-- [email protected]
.....此處省略多行資料......

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of [email protected]^2.2.0 || ^3.0.0 but none was installed.
npm WARN [email protected] requires a peer of [email protected]^1.0.0 || ^2.0.0 || ^3.0.0 but none was installed.

第二步

Vue.js 提供一個官方命令列工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。

只需幾分鐘即可建立並啟動一個帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案：

# 全域性安裝 vue-cli

$ npm install --global vue-cli

# 建立一個基於 webpack 模板的新專案 此處我填的是my-project

$ vue init webpack my-project

$ vue init webpack test     //輸入命令

? Project name (test) test
? Project name test
? Project description (A Vue.js project) 測試專案
? Project description 測試專案
? Author lxx1024
? Author lxx1024
? Vue build standalone
? Install vue-router? (Y/n) Y     //安裝路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n       //Eslint驗證,很嚴謹,所以選擇n
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n) Y
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) Y
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "test".

   To get started:

     cd test
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

# 安裝依賴，走你

$ cd my-project    //進入到專案的根目錄--直接進入到該資料夾即可

$ npm install        //安裝依賴包

$ npm run dev     //執行專案

下面是執行結果

> npm install

> [email protected] install C:\Users\81487\Desktop\test\node_modules\phantomjs-prebuilt
> node install.js

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\81487\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...

Error making request.
Error: connect ETIMEDOUT 54.231.81.168:443
    at Object.exports._errnoException (util.js:1020:11)
    at exports._exceptionWithHostPort (util.js:1043:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1090:14)

Please report this full log at https://github.com/Medium/phantomjs
[email protected] C:\Users\81487\Desktop\test
+-- [email protected]
| +-- [email protected]
| | `-- electron-to-chromi[email protected]
| +-- [email protected]
| +-- [email protected]
.................
.................
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
|   `-- [email protected]
`-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of [email protected]^2.1.0 but none was installed.
npm ERR! Windows_NT 10.0.10240
npm ERR! argv "E:\\nodejs\\node.exe" "E:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v6.11.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the phantomjs-prebuilt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs phantomjs-prebuilt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls phantomjs-prebuilt
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\81487\Desktop\test\npm-debug.log


> npm run dev

> node build/dev-server.js

> Starting dev server...
 DONE  Compiled successfully in 15700ms23:48:41

> Listening at http://localhost:8080

開啟網址顯示vuejs就是成功建立了


精簡版：

1：開啟cmd命令列，首先安裝node

步驟：https://nodejs.org/en/download/      node官網，選擇跟自己的電腦匹配的版本進行下載，然後一步步的安裝即可，輸入node -v，如果出現版本資訊即表示安裝成功。

2：npm包管理器是整合在node中的，所以直接輸入npm -v就能檢視到版本資訊

3：輸入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安裝淘寶映象安裝相關依賴

4：安裝vue-cli腳手架構建工具，輸入命令 npm install -g vue-cli，安裝完成即可。

5：選定路徑，新建vue專案，這裡我是新建到桌面上

6：在上一步得目錄下新建專案，指令vue init  webpack +專案名稱

7：上一步之後就會開始新建專案，詢問專案的相關配置。一路yes省事兒沒啥問題

8：進入到專案的資料夾下

9：執行專案，指令npm run dev

10:在瀏覽器中開啟這個網址，就能看到

至此，vue專案新建完畢