如何使用IntelliJ IDEA开发Vue项目并运行

Web前端 潘老师 8个月前 (12-03) 3441 ℃ (0) 扫码查看

开发Vue基本都是使用VsCode或者HbuildX,但前后端分离开发,还都要求你一个人开发时,两个idea就有点麻烦了,对于像我等Java程序员来说,能用IntelliJ IDEA开发的就不用其他的,下面潘老师来介绍下如何使用IntelliJ IDEA借助插件来开发Vue项目并运行。

一、环境准备

首先保证本地环境能正常运行IntelliJ IDEA,也保证安装好了nodejsvue-cli脚手架,具体的可以参考下面这篇文章。基于基础的环境,接下来我们来搭建IDEA开发Vue项目的环境。

Vue系列入门教程(6)——vue-cli脚手架

一、传统工程的问题 1、兼容性问题 2、使用模块化会导致JS文件增加,从而导致传输文件数增加,增加网络IO 3 […]

二、配置环境

1、安装vue插件

首先IntelliJ IDEA本身是不支持Vue开发的,我们需要安装Vue开发插件,打开File-Settings-plugins,搜索vue,安装vue.js插件,然后重启idea使之生效。
如何使用IntelliJ IDEA开发Vue项目并运行

2、配置ES6支持

因为Vue支持ES6语法,我们需要配置IDEA支持ES6,打开File-Settings-Languages&Frameworks-JavaScript,选择ECMAScript 6+
如何使用IntelliJ IDEA开发Vue项目并运行

3、创建vue项目

可以手工在cmd中使用指令基于vue-cli创建vue项目,但我们也可以在idea中通过界面化方式创建。
1)打开File-New-Project,找到JavaScript,选择Vue.js,如下图:
如何使用IntelliJ IDEA开发Vue项目并运行
IDEA会默认基于vue-cli脚手架创建vue项目,接着Next
2)设置你的vue项目名和项目保存目录,注意配置的nodejs的地址是否正确,其他配置根据需要调整,一般默认即可。最后Finish
如何使用IntelliJ IDEA开发Vue项目并运行
3)接着IDEA会自动创建vue项目,可能会出现如下提示,询问是否配置淘宝镜像源,这样速度会更快,我们输入Y回车即可。
如何使用IntelliJ IDEA开发Vue项目并运行
4)创建好了项目效果如下
如何使用IntelliJ IDEA开发Vue项目并运行
5)打开idea底部terminal终端,输入npm run serve启动vue项目
如何使用IntelliJ IDEA开发Vue项目并运行
6)启动成功后,访问提示出来的项目地址,一般是http://localhost:8080,打开浏览器访问,熟悉的vue页面就出来啦
如何使用IntelliJ IDEA开发Vue项目并运行

三、总结

通过以上的内容,想必大家可以轻松地实现使用IntelliJ IDEA开发Vue项目并运行了,如果有什么疑问可以留言评论哦


版权声明:本站所有文章,如无特殊说明,均为本站原创。转载请务必注明文章来源,谢谢支持。
本文链接:https://www.panziye.com/java/web/4007.html
喜欢 (8)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】