使用Webstorm启动Vue项目

时间:2024-04-02 07:06:26

说一说关于Webstorm的具体操作的问题,这些对于大多数的人来说是一件很简单的事情,但是对于入门小白来说却能卡一下,不要问我是怎么知道的,因为我也是从只懂电脑上shift键是用来切换中英文功能的纯小白一路走过来的。

1:打开一个新的项目,打开file
使用Webstorm启动Vue项目

2:选择在现有的编辑器里面打开还是新开一个窗口
使用Webstorm启动Vue项目

3:在Webstorm启动项目可以选择在终端输入命令

npm run dev

Webstorm调用终端有两种方法:
Webstorm调用终端可以使用快捷键:Alt+F12,
使用Webstorm启动Vue项目

或者在View菜单手动调用。
使用Webstorm启动Vue项目

4:但是每次都打开命令窗口比较麻烦,可以在webstorm内进行配置,从webstorm内启动,这样更加的方便,那么怎么样在Webstorm快速启动Vue项目配置?
####Webstorm快速启动Vue项目配置

1:点击右上角,添加npm配置。
使用Webstorm启动Vue项目

2:点击加号,选择npm
使用Webstorm启动Vue项目

3:命名并且填写运行命令。
使用Webstorm启动Vue项目

4:可以看到控制台出现运行
使用Webstorm启动Vue项目

5:点击绿色按钮
可以看到启动了端口
使用Webstorm启动Vue项目

6:在弹出的默认的浏览器里面
可以看到项目
使用Webstorm启动Vue项目

下次再打开的时候,直接点击右上角的绿色启动按钮即可。

原文作者:祈澈姑娘
关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。