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项目了。
评论区