A. webstorm 什么版本支持vue
在安装Vue插件之前，首先需要打开WebStorm的设置界面。具体步骤如下：点击菜单栏中的“File”，然后选择“Settings”，进入插件设置页面。在插件页面的左侧输入框中，无需输入任何内容，直接点击页面上方的搜索按钮，系统会自动列出所有插件。在搜索结果中，找到“Vue.js”插件，将其选中，右侧的安装框会显示绿色的“Install”字样，点击该按钮进行安装。
安装完成后，可以新建文件时看到相关的Vue文件提示。接下来，可以根据需要设置Vue文件的模板。打开WebStorm的设置界面，依次选择“File”、“Settings”、“Editor”、“File and Code Templates”。在弹出的对话框中，选择“Vue File”，进入模板编辑页面。在这里，可以根据自己的需求编辑默认模板内容，以满足项目开发的具体需求。
设置完成后，每次新建Vue文件时，WebStorm都会按照所设定的模板生成文件。这不仅节省了手动输入模板代码的时间，还能确保代码风格的一致性。需要注意的是，设置Vue模板时，可以添加一些常用的代码片段，如引入必要的库、设置全局变量等，以便快速构建项目。
通过上述步骤，可以轻松地在WebStorm中安装和配置Vue插件，从而提高开发效率，更好地支持Vue项目开发。在实际开发过程中，还可以根据项目需求进一步调整模板内容，以适应不同的开发场景。
B. 如何在WebStorm 2017下调试Vue.js + webpack
在WebStorm 2017中调试Vue.js + webpack项目，需要掌握一些基本的配置和调试技巧。
首先，了解webpack配置中的devtool选项至关重要。设置devtool为‘#source-map’可以生成.map文件，在Chrome浏览器中调试时可显示源代码。配置如下：devtool: '#source-map'
实际上，webpack提供了7个配置项供选择，官方默认的是‘#cheap-mole-eval-source-map’。设置好后，代码中标注了debugger的地方，就能看到对应的代码了，非常方便。
在Chrome中，可以通过快捷键command+p输入文件名找到对应的源代码。设置断点时需注意，这里断点会打在下一行，且一行代码需运行到下一行才算执行。
推荐使用vue家的项目脚手架vue-cli。安装命令：npm install -g vue-cli，然后创建新项目：vue init webpack my-project，一路回车即可。
从网上下载一个带webpack的Vue项目，运行前记得执行npm install。项目构建文件夹中，webpack.dev.conf用于开发模式，webpack.prod.conf用于生产模式，开发模式提供了#cheap-mole-eval-source-map，生产模式根据config文件夹下的proctionSourceMap变量控制是否使用，若为true，则devtool为#source-map，其他使用方法一致。
线上调试时，使用webpack热加载可以省去挂载调试步骤，非常方便。发布后部署到服务器上，仍可使用热加载。热加载原理涉及webpack热加载服务器推送事件__webpack_hmr，eventsource类型，建立一个不会停止的stream流链接，服务器发送更新数据回来append到流的末端，前端读取最新append的数据，然后动态更新页面。
热更新过程包括监听服务器上的数据，有修改时服务器发送数据过来，前端把数据拿来后替换到页面上。
推荐使用fiddler的AutoResponder功能，它可以将一个地址指向另一个地址，匹配正则，非常方便。