当前位置:首页 > 软件开放 > 正文内容

vscode运行vue项目快捷键(vscode怎样运行vue)

软件开放2年前 (2023-04-10)1475

本篇文章给大家谈谈vscode运行vue项目快捷键,以及vscode怎样运行vue对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

vscode使用ctrl+左键

vue项目中,使用ctrl+左键点击DOM中的组件标签,自动打开跳转到对应组件功能

在设置中打开vscode的设置选项(ctrl+,),输入setting搜索,打开在setting.json中编辑,粘贴入以下选项,即可使用此功能

VSCode调试vue项目

先决条件

你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。

在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool 属性。将其更新为:

如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性:

进入Debugger视图,添加Chrome配置,将内容替换成以下内容

设置断点

此处response返回数据

启动调试

在终端使用如下命令开启这个应用

进入Debug视图,选择‘vuejs:chrome’配置,然后按F5或点击绿色的play按钮

随着一个新的 Chrome 实例打开 ,你的断点现在应该被命中了。

在 VS Code 中调试vue项目

1.VS Code 中安装Debugger for Chrome扩展的最新版本:

2.在config/development.config.js(官网描述的是config/index.js,所以需要根据具体的项目而定)中添加如下配置:

3.点击运行调试按钮,再点击设置按钮,修改launch.json文件,配置如下:

4.在vue项目的文件中设置断点

5.启动vue项目:

6.点击运行调试按钮,再点击运行小图标,这时会弹出新的chrome浏览器页面。

7.在弹出的浏览器窗口的页面进行操作,触发断点时会跳转掉vscode的断点处。

遇到的问题:

官网中的launch.json配置中"url": " ",url的端口是8080,这样调试时浏览器页面显示“无法显示此网页”。这里需要改成自己本地起的服务的端口号。

参考:

在 VS Code 中调试:

vscode怎么快速查看函数定义

使用font color=#ff000vue-helper插件/font

快捷键ctrl+左键 (按住ctrl键,左键点击函数),即可跳转到函数定义处。

想要返回跳转前的位置(即回退到上一个光标处),也很简单: 快捷键alt+左箭头

1.点击左边活动栏最下边的插件按钮

2.输入“ vue-helper ”

3.安装

4.此时界面如下:

有这个插件,你还用 “ctrl+f”一个个查看来找函数定义的位置吗,是不是很神奇?

(我之前习惯于用webstorm,尤其是做vue项目的时候压根没打开过vscode,大多是因为后者内置功能太少,尤其是没法像前者那样可以直接跳转到函数定义处。但是自从打开了vscode的插件大门后,才发觉vscode是真香。)

vscode运行vue项目快捷键的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于vscode怎样运行vue、vscode运行vue项目快捷键的信息别忘了在本站进行查找喔。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://chlfg.com/post/16186.html

分享给朋友:

“vscode运行vue项目快捷键(vscode怎样运行vue)” 的相关文章

手机浏览器显示不全网页内容(手机浏览器不能显示全部网页内容)

手机浏览器显示不全网页内容(手机浏览器不能显示全部网页内容)

本篇文章给大家谈谈手机浏览器显示不全网页内容,以及手机浏览器不能显示全部网页内容对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、手机网页显示不完整怎么办? 2、手机浏览电脑版网页显示不全 手机浏览电脑版网页显示不全怎么办 3、存龙网站手机打开不全 4、手机网页...

阿拉德之怒差不多的游戏(跟阿拉德之怒差不多的游戏)

阿拉德之怒差不多的游戏(跟阿拉德之怒差不多的游戏)

本篇文章给大家谈谈阿拉德之怒差不多的游戏,以及跟阿拉德之怒差不多的游戏对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、请问一下勇士守护者和阿拉德之怒一样吗 2、阿拉德之怒停服了还有什么类似的吗 3、有没有类似dnf的手游? 4、各位大神有没有好玩的格斗游戏类似...

问道聚宝斋交易平台怎么进入(百度问道聚宝斋交易平台)

问道聚宝斋交易平台怎么进入(百度问道聚宝斋交易平台)

今天给各位分享问道聚宝斋交易平台怎么进入的知识,其中也会对百度问道聚宝斋交易平台进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、问道手游聚宝斋在哪里可以登陆? 2、问道手游官服聚宝斋怎么用? 3、问道手游聚宝斋平台怎么操作 聚宝斋平台操作方法介绍...

iphone信任软件怎么设置(iphone哪里设置信任软件)

iphone信任软件怎么设置(iphone哪里设置信任软件)

今天给各位分享iphone信任软件怎么设置的知识,其中也会对iphone哪里设置信任软件进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、苹果手机软件信任在哪设置 2、iphone信任软件怎么设置的? 3、如何在苹果手机中设置信任软件? 苹果手机软件...

在手机上怎么看监控是什么软件(监控怎么用手机查看 用什么软件)

在手机上怎么看监控是什么软件(监控怎么用手机查看 用什么软件)

本篇文章给大家谈谈在手机上怎么看监控是什么软件,以及监控怎么用手机查看 用什么软件对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、怎么用手机查看家里的监控? 2、家里边的手机监控软件怎么登录下载什么软件 3、家里安装监控怎么可以在手机上看到 4、手机上看监控的...

小橙子怎么了(小橙子姐姐怎么了)

小橙子怎么了(小橙子姐姐怎么了)

本篇文章给大家谈谈小橙子怎么了,以及小橙子姐姐怎么了对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、以家人之名小橙子从楼上摔下来了是第几集? 2、小橙子爸爸怎么死的 3、《以家人之名》中小橙子演员曾被遗弃是怎么回事? 4、小橙子的日常生活,圈了多少的粉丝?优秀...