1、webstorm下载安装

http://www.cncrk.com/downinfo/237065.html

2、安装vue插件

image.png

3、安装node.js

https://nodejs.org/en/download/current/

image.png

4、安装淘宝镜像（类似于阿里云的maven中央仓库镜像）

安装时间有点长

安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

验证命令：cnpm -v

image.png

5、安装webpack

利用npm安装webpack 命令行语句为npm install webpack -g 。时间略长。
验证命令：webpack -v

image.png

6、全局安装vue-cli

安装语句为：npm install --global vue-cli

验证命令:vue -V (V要大写)

image.png

注：上面这三个安装的过程中，可能会卡了很长时间，这时候可以ctrl+C先停止，再安装一次。

7、使用webstorm新建项目

image.png

image.png

之后就一路下一步就可以了。

image.png

在helloworld.vue中添加一个按钮和方法，用来测试debug

8、webstorm设置浏览器

image.png

注：
1、这里可能会出现不管你选择什么，最后启动项目的时候都是弹框出IE浏览器，所以，建议直接把系统中的IE卸载掉
2、在后面安装好chrome插件后，项目debug时弹出的浏览器，不是这里配置好的本地浏览器，而是webstorm自带的默认浏览器，所以插件还得安装一次

9、webstorm启动项目

image.png

image.png

配置好之后，启动

image.png

10、安装chrome插件

网上乱七八糟的方法很多，其实最方便的还是使用翻墙软件直接在谷歌商店下载，方便又快速

• 安装JetBrains IDE Support
  https://chrome.google.com/webstore/search/JetBrains，点击添加到chrome

• 安装Vue.js devtools
  https://chrome.google.com/webstore/search/vue，点击添加到chrome

11、webstorm debug 项目

image.png

12、开始debug项目

• 首先，先启动项目（第9步）
• 然后，点击 jsdebug（第11步）

image.png

• 这时，正常情况下，会弹出一个浏览器，来访问项目，注意如果浏览器右上脚没有安装的插件，则需要重新安装一次，这个浏览器可能webstorm自带的默认浏览器，我们之前第10步安装的插件是在我们系统的chrome上，所以这里需要再按照第10步，重新在弹出来浏览器里安装一次插件

image.png

• 安装完成以后，就可以debug了

image.png

image.png

image.png

注：如果上面的都配置好了，但是debug还是不起作用，那可能是下面这个问题；
点击浏览器中又上角JetBrains IDE Support插件——选项——apply，这个端口要和webstorm中的端口保持一致，如下

image.png

image.png

注：上面谷歌浏览器的安装是基于版本 74.0.3729.169（正式版本） （32 位）；如果版本不一样可能安装的插件也有一点区别，在更新的版本上，在webstorm中 点击debug时，不会弹出浏览器，
在JetBrains IDE Support插件中有一个手动连接webstorm的，同时浏览器中会出现 正在调试的 tip，这时候就可以再webstorm中debug了

image.png