手把手一步步使用webStrom创建vue项目

注意：这里我使用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: 
[email protected] (node_modules\webpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: 
Unsupported platform for [email protected]: 
wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
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 [email protected] 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.

+ [email protected]
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 [email protected]: 
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
+ [email protected]
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的界面即为成功。