如何用intellij idea调试vue
3种调试方式
1、WebStorm + Chrome
在WebStorm中启动调试时，WebStorm会根据你设置的url，自动打开新的Chrome浏览器进程访问这个设置的url，而且这个浏览器页面和你平常看到的浏览器差异会比较大，看不到书签栏，也看不到先前所装的所有插件。
2、Visual Studio Code调试
Visual Studio Code + Chrome 也可以调试，也能支持在Visual Studio Code源代码处加断调试，当代码执行流运行到这个地方后，也会中断暂停运行，并在调试窗口显示本地变量的值以及堆栈，还可以在Debug Console里执行表达式。
3、Chrome直接调试
在Chrome中也可以打开调试窗口，找到source，然后在源代码处打断点，当代码执行到断点处也会暂停执行，然后有一个很小的窗口显示环境变量的值。
扩展资料
准备环境：
1、在chrome中安装插件 JetBrains IDE Support (古月: 实际测试, 不需要该插件也行)
2、创建demo项目 vue init webpack vuejs-webpack-project
3、修改source map打开config/index.js文件, 修改source map属性，从cheap-module-eval-source-map改为source-map
idea的Maven项目,vue.js应该放哪
在搭建vue的开发环境之前，一定一定要先下载node.js，，vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网或者中文网里面下载，根据自己的电脑选择是32还是64 。
Idea添加Vue插件方法，
点击file_settings_Plugins然后搜索Vue
点击安装！
我的安装成功，
创建项目
file_new_Project_Static Web_Vue.js
选择好文件夹点击next然后就一直出不来，特别慢，然后没有等，网上说是版本问题，说换个版本。
于是使用
去下载版本，起初随便找了个版本，下载下来安装，结果报错！报错内容原因为版本和idea版本不匹配！
重新下载，那我想也不能还是大海捞针一样继续乱找，然后看了下刚才的下载页，第一行也就算是表头吧，人家第一列是vue的版本，第二列是匹配的idea版本，哈哈哈，这下就简单了，直接找到自己对应的版本的idea，下载相应的vue版本即可！
例如我的是2019.3.3然后下载的其中之一，
记得好像是vue193.6494.5，上面的方法下载完成，安装成功！
file_settings_plugins_点击右上方的设置按钮_Install Plugin from Disk选择下载的安装包。安装成功！
创建项目这次点击next，比较快的就过去了。
vue2开发过程中用到的插件
在工作中遇到了一些需求使用的第三方插件实现，记录一下
一、vuedraggable 拖拽效果插件
vue.draggable中文文档
二、vue-clipboard2 剪切板效果插件（复制指定内容）
vue-clipboard2文档
三、json-bigint js中长整型精度问题
处理长整数精度问题
IDEA如何运行vue项目
1.首先在IDEA中安装vue.js插件
File--Settings--Plugins--搜索vue.js插件进行安装
2.点击Edit Configurations，添加一个npm
然后就可以在IDEA中运行了