使用VS Code运行前端代码

文章介绍了如何在VSCode中运行HTML和Vue代码,包括安装必要的插件,新建文件夹和HTML文件,以及利用Vue-cli搭建Vue项目。通过VSCode的openinbrowser插件可以方便地运行HTML文件,而Vue项目的运行则涉及Vue-cli的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


VS Code运行HTML文件

提示:这里可以添加本文要记录的大概内容:

但是我在使用VS Code和Hbuilder的不同是:

Hbuilder我记得是可以在菜单栏的“文件”→“新建”→“HTML5+项目”,填写项目名称、路径等信息后点击“完成”即可创建一个新项目

一、安装VS Code 配置插件

如何使用VS Code安装插件及VS Code上的常用插件点我查看

以前写HTML用的是Hbuilder,最近突然发现VS Code也不错,只需要安装open in browser插件即可

在这里插入图片描述

二、在电脑上新建文件夹

VS Code使用是在本地打开一个文件夹

先在电脑上新建个文件夹
在这里插入图片描述
打开VS Code
然后选择【文件】→【打开文件夹】,找到刚才新建的文件夹
在这里插入图片描述

随后点开该文件夹,再次右键选择【新建文件夹】
目的:做好文件分类
在这里插入图片描述

三、新建文件【名字.html】

然后要再右键新建文件【名字.html】使用
html文件图标会变成:<>
css文件图标会变成:#
请添加图片描述

四、运行.html文件

进入页面输入:html:5回车,我们大部分代码是写在body标签下的
下面是个简单的HTML页面展示:
在这里插入图片描述

在文件里面还有个自动保存代码的功能
在这里插入图片描述


VS Code运行VUE代码

Vue-cli脚手架

使用Visual Studio Code (VSCode) 进行前端开发时,如果遇到使用Ctrl键点击页面链接无法跳转到对应浏览器页面的问题,可能是由于以下几个原因导致的: 1. **扩展问题**: - 确保安装了适用于HTML的扩展,如“Live Server”。这个扩展可以在本地启动一个开发服务器,并在保存文件时自动刷新浏览器。 - 检查是否有其他扩展冲突,尝试禁用其他扩展,看看问题是否解决。 2. **浏览器设置**: - 确保默认浏览器设置正确。在VSCode中,可以通过命令面板(Ctrl+Shift+P)输入“Preferences: Open Settings (JSON)”并打开设置文件,添加或修改以下配置: ```json "html.defaultBrowser": "your-browser-name" ``` - 确认浏览器没有阻止弹出窗口或重定向。 3. **快捷键冲突**: - 检查是否有其他快捷键与Ctrl键冲突。可以通过命令面板输入“Preferences: Open Keyboard Shortcuts”查看所有快捷键设置,确保没有冲突。 4. **项目配置**: - 确保项目根目录下有正确的配置文件,如`launch.json`。在调试配置中,确保设置了正确的URL和端口。 5. **重新启动VSCode**: - 有时候,重新启动VSCode可以解决一些临时的问题。 如果以上方法都无法解决问题,可以尝试以下步骤: 1. **更新VSCode和扩展**: - 确保VSCode和所有扩展都是最新版本。 2. **查看控制台日志**: - 在VSCode中打开调试控制台,查看是否有错误日志。 3. **重新安装VSCode**: - 如果问题依然存在,可以尝试卸载并重新安装VSCode。 希望这些方法能帮助你解决问题。
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

二哈喇子!

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值