vue+element ui 之二：开发配置webstorm

浏览器插件安装

chrome浏览器：Vue.js devtools插件，去应用商店装上此插件。然后找到此插件对应的 manifest.json（用everything搜或磁盘搜索，当搜出多个目录下的 manifest.json 文件时，根据插件的标签签名（如nhdogjmejiglipccpnnnanhbledajbpd）或安装时间（如2018/4/27）可以找到），将"persistent": false,改为"persistent": true,。如下图：

manifest.json.png

webstorm相关配置

• 添加vue插件: vue.js

  
  1.png

• 设置js版本：es6

  
  2.png

• 添加vue.js文件模版

  
  3.png
• 配置babel（类似sass）：es6 转 es5
  安装：$ npm install -g babel
  配置：
  4.png
• webstorm内存配置：bin目录下WebStorm.exe.vmoptions和WebStorm64.exe.vmoptions两个文件，修改如下(-Xms和-Xmx配置)：

-server
-Xms512m
-Xmx1024m
-XX:ReservedCodeCacheSize=240m
-XX:+UseConcMarkSweepGC
-XX:SoftRefLRUPolicyMSPerMB=50
-ea
-Dsun.io.useCanonCaches=false
-Djava.net.preferIPv4Stack=true
-XX:+HeapDumpOnOutOfMemoryError
-XX:-OmitStackTraceInFastThrow

（ps：这里-Xms最大值不能超过1024，否则webstorm将无法打开）

• 开发调试配置npm（或者node或JavaScript debug）
  5.png

参考

• 利用webstrom调试Vue.js单页面程序的方法教程
• webstorm创建和调试vue项目
• 解决webstorm卡顿问题
• vue开发环境搭建（WebStorm）
• webstorm 设置ES6语法支持以及添加vuejs开发配置
• webstorm开发vue，进行一些配置
• Vue.js devtools：调试vue.js应用的浏览器扩展 Chrome插件图文教程