侧边栏壁纸
博主头像
孔子说JAVA博主等级

成功只是一只沦落在鸡窝里的鹰,成功永远属于自信且有毅力的人!

  • 累计撰写 285 篇文章
  • 累计创建 125 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

Idea2022最新版本配置支持vue的识别和运行

孔子说JAVA
2022-05-26 / 0 评论 / 0 点赞 / 166 阅读 / 1,330 字 / 正在检测是否收录...

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 文件了。

image-1653360961130

2、给Idea设置vue语法提示

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

image-1653361464100

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

image-1653361514144

3、让 Idea 支持 ECMAScript 6 (ES6)

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

image-1653364605440

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

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

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

image-1653361713573

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

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

image-1653361938495

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

image-1653363864628

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

image-1653363944888

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

image-1653364081196

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

image-1653364143068

0

评论区