vue项目案例（如何使用IntelliJ IDEA开发Vue项目并运行）
vue项目案例：开发Vue基本都是使用VsCode或者HbuildX，但前后端分离开发，还都要求你一个人开发时，两个idea就有点麻烦了，对于像我等Java程序员来说，能用IntelliJ IDEA开发的就不用其他的，下面潘老师来介绍下如何使用IntelliJ IDEA借助插件来开发Vue项目并运行。
一、环境准备
首先保证本地环境能正常运行IntelliJ IDEA，也保证安装好了nodejs和vue-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使之生效。
2、配置ES6支持
因为Vue支持ES6语法，我们需要配置IDEA支持ES6，打开File-Settings-Languages&Frameworks-JavaScript，选择ECMAScript 6+
3、创建vue项目
可以手工在cmd中使用指令基于vue-cli创建vue项目，但我们也可以在idea中通过界面化方式创建。
1）打开File-New-Project，找到JavaScript，选择Vue.js，如下图：
IDEA会默认基于vue-cli脚手架创建vue项目，接着Next。
2）设置你的vue项目名和项目保存目录，注意配置的nodejs的地址是否正确，其他配置根据需要调整，一般默认即可。最后Finish
3)接着IDEA会自动创建vue项目，可能会出现如下提示，询问是否配置淘宝镜像源，这样速度会更快，我们输入Y回车即可。
4）创建好了项目效果如下
5）打开idea底部terminal终端，输入npm run serve启动vue项目
6）启动成功后，访问提示出来的项目地址，一般是http://localhost:8080，打开浏览器访问，熟悉的vue页面就出来啦
三、总结
通过以上的内容，想必大家可以轻松地实现使用IntelliJ IDEA开发Vue项目并运行了，如果有什么疑问可以留言评论哦。
本文《vue项目案例（如何使用IntelliJ IDEA开发Vue项目并运行）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。随机文章
SEO教程站长导航
友情链接交换
搜素引擎算法
GEO培训
SEO教程
友情链接交换
搜素引擎算法
百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：用户投稿，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/150478.html
微信扫一扫
支付宝扫一扫
