如何在VSCode内嵌浏览器实时预览Vue项目

已于 2023-07-28 10:50:15 修改
阅读量5k 收藏 1
点赞数 1
分类专栏： Vue 前端 安装教程 文章标签： vscode vue.js 前端
于 2023-07-28 10:48:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50298323/article/details/131975437
版权
前端 同时被 3 个专栏收录
34 篇文章 0 订阅
订阅专栏
Vue
18 篇文章 0 订阅
订阅专栏
安装教程
14 篇文章 0 订阅
订阅专栏

如何在VSCode内嵌浏览器实时预览Vue项目

如何在VSCode内嵌浏览器实时预览Vue项目：

安装以下两个插件：just heml preview 和 Browser Preview

  1. just heml preview：使用ctrl + shift + p 打开命令 然后输入：just preview 即可打开 输入本地项目地址：localhost:4000 最后可按照vscode正常分屏方式分屏（右上角有pc端和移动端）
    在这里插入图片描述
  2. Browser Preview：现已不再维护 安装成功后左边会出现一个类似于写字板的东西 点击打开再输入本地项目地址即可
    在这里插入图片描述
    点击后打开的页面：
    在这里插入图片描述
    地址栏输入本地项目地址：
    在这里插入图片描述
Vamp_Piece
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vscode怎么看vue界面_如何优雅地使用 VSCode 来编辑 vue 文件？
weixin_39715348的博客
12-18 1892
最近有个项目使用了Vue.js，本来一直使用的是 PHPStorm 来进行开发，可是遇到了很多问题。后来，果断放弃收费的 PHPStorm ，改用vscode (Visual Stdio Code).当然 vscode 对 vue 也不是原生支持的，今天来扒一扒如何配置 vscode 以便优雅地编辑 vue 文件先来扒一扒使用 PHPStorm 遇到的问题：vue文件虽然可以通过插件来解决高...
vscode怎么看vue界面_VSCode打开已有vuejs项目
weixin_39733821的博客
12-18 3277
今天公司培训使用VSCode来编写vuejs项目，拿了一个范例来展示，讲的比较快，没怎么听清楚。于是下来自己动手配置一下。下载安装并配置VSCode随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。1、vetur插件的安装该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件-&g...
vscode-browse-lite：in VS Code中的嵌入式浏览器
03-03
浏览精简版 VS Code中的嵌入式浏览器 由从 :high_voltage: 页面刷新更快 :last_quarter_moon: 暗模式感知 :artist_palette: 主题感知UI :lady_beetle: 内置devtools支持 :electric_plug: 可扩展的动作 :desktop_computer: 在系统浏览器中重新打开 :check_mark_button: 无遥测 运行“ Browse Lite: Open...命令以启动浏览器 此扩展最初是为构建的。 赞助商 该项目是我的一部分。 执照 麻省理工学院-版权所有（c）2019 Kenneth Auchenberg 麻省理工学院-版权所有（c）2021 Anthony Fu
vscode内置浏览器 开发vue 显示网址
web修理工
05-31 7412
最近使用VS Code开发vue项目，需要经常在编辑器和浏览器之间来回切换查看页面效果，感觉特别繁琐！今天就来分享下如何在VS Code中实时预览HTML页面或VUE/React/Angular等页面效果。 vscode预览HTML 1、HTML Preview 在扩展中搜索“ HTML Preview ”，点击安装，通过如下快捷键预览页面。 打开浏览器预览 - ctrl+shift+v or cmd+shift+v 编辑器侧边预览 - ctrl+k v or cmd+k v 2、Live Server
探索未来编码体验： Browse Lite - 内置浏览器的VS Code扩展
gitblog_00014的博客
05-21 450
探索未来编码体验： Browse Lite - 内置浏览器的VS Code扩展 项目地址:https://gitcode.com/antfu/vscode-browse-lite 项目介绍 在代码世界中，快速预览和调试网页是一个不可或缺的功能。Browse Lite，由Anthony Fu fork自Kenneth Auchenberg的Browser Preview，为您的Visual Stud...
VS Code开发Vue项目常用插件
dreamingbaobei的博客
08-29 8333
VS Code是免费软件，直接到官网下载安装即可，如果选用这款编辑器，建议花点时间实习一下这款软件，安装必要的插件，会大大提供编码效率。 笔者从从前使用webstorm做前端项目，下面记录在项目实践中的一些配置。
轮播图动态渲染
sl105105的博客
08-04 1622
因为Vue在更新DOM是异步的,所以数据发生变化,Vue将开启一个异步更新,视图要等待数据变化完,在统一更新,我们点击事件获取的文本值就是发生变化前的,要解决这个问题就要使用。添加样式的时候一定要注意权重,因为是全局作用域,我们为了提高层级,可以添加scoped让他的作用域变成局部作用域,或者添加!下载图片放在你srcde assets中,并引入图片,这一步一定要注意你的引入地址是不是正确的,一般我们都会将图片放置在src.assets。在子组件添加父组件的props接口,方便我们获取。...
vscode-实现html和vue实时预览-对比了vscode的8个预览插件
热门推荐
billycoder的专栏
02-06 2万+
1.Open in Browser 打开chrome浏览器或者其他外部浏览器 总结:单纯想打开外部浏览器,用它 2.HTML Preview 内嵌浏览器 打开方便,当前页面是html页面,点击右上角图标就可以了 可以实时预览效果 不足:带图片的话,不能有中文路径 3.vscode-preview-server 可以实时预览效果 右键使用 可以内嵌,也可以外部 右键使用 4.Live Server 可以实时预览效果 右键使用 打开外部浏览器 右键菜单 5. Brow
VSCode插件分享：一个实时预览Vue/React组件的插件
qq_43067585的博客
11-16 6461
在VSCode中开发Vue/React组件时，怎么实时预览组件？本篇文章就给大家分享一个VSCode 中实时预览Vue/React组件的插件，希望对大家有所帮助！
vscode怎么看vue界面_vscode下面开发vue.js项目
weixin_39584405的博客
12-18 909
1.首先用官方vue-cli脚手架创建一个vue的集成环境(不会的请点击我)，目录如下：2.然后在src下面的components目录(组件目录)下面新建一个Test.vue文件(文件首字母要大写)文件内容如下：3.在router目录下面(路由跳转目录)下的index.js页面中添加，我们刚才添加的Test.vue页面的跳转路由。文件内如如下：4.使用快捷键Ctrl+~键，就可以出现命令行输入页面...
vscode怎么看vue界面_vscode 使用经验，让vue开发跳转定义和webstorm一样
weixin_39774445的博客
12-18 671
插件推荐：1、Auto Rename Tag修改html标签自动补全，改了首标签，尾部自动变。webstrom自带2、Code Runner自动检测packjson文件执行npm命令。webstrom自带3、样式Material Themewebstrom也有这样的插件，但是vscode丑好多4、eslint必须的5、GitLens — Git supercharged可以查看git所有提交记录，...
vscode新建一个最简单的vue项目
09-27
在本文中，我们将深入探讨如何使用Visual Studio Code（VSCode）创建一个最简单的Vue.js项目。Vue.js是一款轻量级的前端JavaScript框架，以其易学易用和强大的功能深受开发者喜爱。VSCode作为一款功能丰富的代码编辑...
详解VSCode配置启动Vue项目
10-17
本文将详细介绍如何在VSCode中配置启动Vue项目，以便高效地进行Vue应用的开发。 首先，确保你已经下载并安装了最新版本的VSCode。你可以通过搜索引擎搜索"VSCode最新版"来获取安装程序。安装完成后，按下`Ctrl + ...
VSCode设置网页代码实时预览的实现
10-15
主要介绍了VSCode设置网页代码实时预览的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vscode 搭建一个vue项目.doc
08-07
本资源将指导您如何在 VSCode 中搭建一个 Vue 项目，从安装依赖项到项目的创建和发布。 一、安装依赖项 1. 安装 Node.js：Node.js 是一个 JavaScript 运行环境，需要在本地安装。 2. 安装 Vue CLI：Vue CLI 是一个...
vue项目实现github在线预览功能
08-27
Vue 项目实现 GitHub 在线预览功能 本文主要介绍了 Vue 项目实现 GitHub 在线预览功能，通过解决两个问题，带领大家一起学习整个过程。 问题 1：为什么页面显示为空白？ 当我们在命令行执行 `npm run build` 后，...
VS code上创建Vue项目详细化教程2-配置并创建Vue项目
最新发布
Charles_Clark的博客
06-06 890
VS code上创建Vue项目详细化教程2-配置并创建Vue项目
vscode工具，如何实现实时预览？
linshileba的博客
08-18 999
安装完成后，在页面右击Open with Live Server就可以进行实时预览啦。vscode工具安装live Server插件，修改完代码，自动更新浏览器啦！改完代码后，浏览器必须要重新刷新，比较麻烦。
vscode怎么看vue界面_使用vscode时，如何在.vue文件中使用html代码补全功能
weixin_39759881的博客
12-18 634
最近在Vue大神的推荐下使用了vscode，还挺好用的，跟webstorm比起来要轻量很多，打开的速度也快，功能跟webstorm也差不多，挺丰富的，尤其是插件。最主要的是使用过程中，不会卡顿！！！这是重点！！！那么，使用的时候发现了在.vue的文件中，你只打一个div，在按tab键，是不会自动补全代码的，想想不会自动补全代码，那得多浪费开发的时间，于是我就找到了一个解决办法，请看下面：一、HTM...
怎么在vscode中新建一个vue项目
04-02
要在VSCode中新建Vue项目，需要进行以下步骤： 1. 安装Vue CLI 在终端中输入以下命令： ``` npm install -g @vue/cli ``` 2. 创建Vue项目 ...在终端中输入以下命令： ...这样就可以在浏览器中预览你的Vue项目了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值