IntelliJ IDEA被认为是当前Java开发效率最快的IDE工具。它整合了开发过程中实用的众多功能，当然也支持Vue的开发和运行，本教程主要介绍 Idea 配置vue的识别和运行npm，让前端开发可以方便的使用 Idea 开发工具进行vue的开发，最大程度的加快开发的速度。

1、让Idea能够支持/识别.vue文件

让Idea支持/识别 .vue 文件，其实就是给 Idea 安装 vue.js 插件，通过 File | Settings | Plugins 菜单进入插件设置页面，在搜索框中输入vue，点击搜索。找到结果里的vue.js，点击右边的install按钮，安装成功后重启idea，这时候 Idea 就能够识别 .vue 文件了。

2、给Idea设置vue语法提示

让 Idea 能够识别vue语法，在输入vue关键词时能够提示，通过 File | Settings | Editor | File Types 菜单进入设置页面，找到 HTML选项点击，在右侧的 File name patterns 里面添加 *.vue 即可（适合2020.3.3旗舰版本及以上），如下图所示：

按照上述步骤配置后，我们可以编辑个vue文件，看下是否有vue关键词语法提示，具体效果展示如下图：

3、让 Idea 支持 ECMAScript 6 (ES6)

通过 File | Settings | Languages & Frameworks | JavaScript 菜单进入js设置页面，在右侧 JavaScript language version 下拉框中选择 ECMAScript 6+。

4、让Idea可以运行vue项目(配置npm)

前提条件：本地需要搭建node.js环境。

在 Idea 界面上方，找到 Run Configuration 配置的地方，点击右侧的下拉箭头，在展开的下拉菜单中再点击 Edit Configurations，具体操作如下图。

在弹出的配置框中点击左上方的“+”，在左侧会展示一个配置列表，找到 npm 并点击，这时候该弹出框页面会显示npm的配置页面，在 name 框中填入 dev, 表示我们这是开发环境，这里的名字可以随意起，主要用于我们识别配置的具体服务。在 package.json 框中选择我们要运行的vue项目的 package.json 文件所在的路径。在 Command 框中填写 run 命令。在 Scripts 框中填写 dev 命令。在 Node interpreter 和 Package manager 中会自动填入node及npm程序的路径，如果没有的话需要手动选择。最后点击 Ok 按钮完成配置，具体配置如下图所示。

• 以上配置的命令相当于在dos窗口中执行的npmu命令： npm run dev。

配置好以后我们在 Run Configuration 部分我们通过下拉箭头可以选择到刚才配置的name为dev的npm配置。

点击右侧的运行按钮（绿色的三角箭头），然后在控制台可以看到npm的启动过程。

等控制台显示编译完成并成功运行，且给出了访问网址时，vue项目启动完成。

在 Run Configuration 右侧可以找到一个红色的方块按钮，这是停止服务的按钮。点击该按钮时，如果Idea运行了多个服务，会展示一个下拉列表，点击我们要停止的服务 dev，就可以停掉dev配置所对应的vue项目了。