Vue开发实例（02）之将Vue项目代码导入到IDEA并运行

Posted 2022-01-09 编程界明世隐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue开发实例（02）之将Vue项目代码导入到IDEA并运行相关的知识，希望对你有一定的参考价值。

作者简介

作者名：编程界明世隐
简介：CSDN博客专家，从事软件开发多年，精通Java、javascript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！

引言

Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！
即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！

导入Vue项目

点击打开或者导入，找到你创建的Vue项目，我这里用的是上一节种创建的Vue项目。

会自动打开README.md，这是告诉我们怎么用命令启动服务的。

找到工具栏中的“锤子”旁边，点击添加配置

点击“ + ”号，选择npm

在脚本处输入 serve

此时菜单栏“锤子”旁边有了变化，三角形也变绿色了，点击这个三角形绿色按钮，启动。

项目启动了，并且打印出了启动地址

复制这个地址到浏览器中，回车，打开了我们之前项目的首页

设置启动服务就自动打开浏览器页面地址
在package.json 中修改scripts的serve，后面加“ --open ”即可

在次启动服务，浏览器中就会自动帮打开了。