1. 首先安装vue插件
   方法：setting --> plugin ，点击plugin，在内容部分的左侧输入框输入vue就可以找到相关插件了。网上攻略说会有vue-for-idea和vue两个插件。我这里只有一个。
   

   如图所示：

2. 设置vue新建文件模板
   步骤： settings --> file and code templates .若在内容区域左侧有vue file选项，点击修改对应的模板内容；若没有vue file选项，按照下图步骤添加即可。

   
   

3. 设置vue文件支持的编码格式：
   步骤：settings --> code style,把code style 下面other file types中的缩进改为2，这也是设置vue格式中最关键的一步。

   
   

4. vue 使用的是es6语法， 所以要将javascript的版本改成es6
   步骤：settings --> languages& frameworks -- > javascript ,选择javascript,修改内容区域的javascript language version: ECMAScript 6 即可。

   
   

5. 如果你在修改vue文件保存后，浏览器不自动刷新。
   方法：settings --> Appearance&Behavior -- > system setting,修改下图设置：
   webstorm的保存，会在临时文件夹中创建一个文件用来保存（好像没有触发实际文件的变更），所以我们要在setting中勾掉这个设置。

显然每次修改代码，每次去cmd输入命令是个很繁琐的过程，所以在webstorm中调出npm菜单。在package.json文件上点击右键—〉点击show npm scripts 即可调出菜单，以后运行只需在npm菜单里双击dev.注意在命令行运行项目和dev运行项目不可一起进行，进行一个时需将另一个关闭，否则会报端口已被占用的错误。
至此，webstorm中对vue的设置已经结束，下面就可以用来编辑了。