注意：這裡我使用webstrom版本：2018.2.4

一：安裝配置node.js

Node.js是一個Javascript執行環境。

npm是node的包管理工具。

下載node.js，配置環境變數：
https://nodejs.org/en/download/

驗證是否成功：

C:\Users\13579>npm -v
6.4.1

//或

C:\Users\13579> node -v
v8.12.0

可參考：配置環境變數

二：使用npm安裝webpack

使用npm（需要安裝node環境）全域性安裝webpack，開啟命令列工具輸入：
npm install webpack -g或者（npm install -g webpack），安裝完成之後輸入 webpack -v，
如下圖，如果出現相應的版本號，則說明安裝成功。

C:\Users\13579>npm install webpack -g
C:\Users\13579\AppData\Roaming\npm\webpack -> 
C:\Users\13579\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: 
fsevents@1.2.4 (node_modules\webpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: 
Unsupported platform for fsevents@1.2.4: 
wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@4.27.1
added 321 packages from 278 contributors in 72.555s

//----------------------------------------------------------

C:\Users\13579>webpack -v
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\13579\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, 
open 'C:\Users\13579\package.json'
npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. 
You must install peer dependencies yourself.
npm WARN 13579 No description
npm WARN 13579 No repository field.
npm WARN 13579 No README data
npm WARN 13579 No license field.

+ webpack-cli@3.1.2
added 84 packages from 26 contributors and audited 111 packages in 17.013s
found 0 vulnerabilities

4.27.1

//----------------------------------------------------------

C:\Users\13579>webpack -v
4.27.1

注意：webpack 4.X 開始，需要安裝 webpack-cli 依賴 ,所以使用這條命令 npm install webpack webpack-cli -g
或者如上在這裡Do you want to install ‘webpack-cli’ (yes/no): yes 直接輸入yes.

如果報錯：

Error: Cannot find module 'webpack-cli'

就執行以下命令進行安裝即可：

npm install webpack-cli -g

三：使用npm安裝vue-cli

vue-cli是vue.js的腳手架，用於自動生成vue.js+webpack的專案模板。

全域性安裝vue-cli，在cmd中輸入命令:npm install --global vue-cli

安裝完成之後輸入 vue -V，
如下圖，如果出現相應的版本號，則說明安裝成功。

C:\Users\13579>npm install --global vue-cli
npm WARN deprecated coffee-script@1.12.7: 
CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\13579\AppData\Roaming\npm\vue-list -> 
C:\Users\13579\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\13579\AppData\Roaming\npm\vue -> 
C:\Users\13579\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\13579\AppData\Roaming\npm\vue-init -> 
C:\Users\13579\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 43.844s

//----------------------------------------------------------

C:\Users\13579> vue -V
2.9.6

C:\Users\13579>

開啟 C:\Users\13579\AppData\Roaming\npm 目錄下可以看到：

如果找不到，也沒關係，因為是全域性的，所以新建Vue專案時，即可自動檢測到vue-cli的安裝路徑，如下:

四：使用webstrom建立專案

file --> new --> project , 選擇vue.js, 然後配置專案路徑 ，node.js的執行路徑 ， vue-cli 的安裝路徑。

然後一路next，直到完成。

專案建立完成後結構如下圖：

五：使用webstrom執行專案

點選edit configuration ，配置名稱，命令和指令碼，並確定。

然後點選edit configuration右側的三角形執行，看到出現地址並點選，瀏覽器出現vue的介面即為成功。