vue: WebStorm设置快速编译运行

WebSorm是一款优秀的前端开发工具,而Vue项目可以使用Node进行编译运行,平常我们可以通过命令行部署项目进行调试。

本文介绍设置Webstorm进行快速部署Vue项目。

第一步

点击启动快捷按钮旁边的向下小箭头,在列表中选择Edit选项:

这里写图片描述

第二步

打开启动设置页面后,点击左上角的加号添加新的运行方式:

这里写图片描述

第三步

在弹出的选择框中,选择node.js启动模式:

这里写图片描述

第四步

在新打开的设置页面中,在红色圈中的地方设置如图路径的文件:

这里写图片描述

至此设置成功,直接点启动按钮就可以部署项目。

在使用WebStorm创建Vue项目时,你可能会遇到一些警告和错误。例如,可能会出现一些关于npm配置的警告,你可以参考这篇博客文章()中的解决方法来解决这些问题。 创建完成后,你将会看到项目的结构。在WebStorm中创建的Vue项目,一般会有一些默认的文件和文件夹,可以根据自己的需求进行修改和扩展。你可以在WebStorm项目视图中查看项目的结构和文件。 当项目创建完成后,WebStorm会自动显示一个URL地址(例如http://localhost:8080/),你可以点击该地址来访问你的Vue项目的页面。如果页面能够正常显示,那么说明你的项目已经成功运行了。 总结来说,使用WebStorm创建Vue项目时,可能会遇到一些警告和错误,你可以参考相应的解决方法来解决这些问题。创建完成后,你可以查看项目的结构,并通过访问指定的URL地址来验证项目是否成功运行。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [WebStorm创建Vue项目教程(五)创建第一个Vue项目](https://blog.csdn.net/j_l_sheng/article/details/125773828)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [webstorm2019版本创建VUE项目](https://download.csdn.net/download/weixin_38682076/14886910)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [webstorm编译软件创建vue项目框架并运行](https://blog.csdn.net/m0_66778036/article/details/130099934)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值