vue2学习笔记3 - 开发环境知识补充:live server简介

学习笔记1搭建开发环境中,在vs code里安装了live server插件,后续多次使用open with live server来打开浏览器,展示代码运行效果。本着知其然也要知其所以然的态度,稍稍了解了一下Live server。

什么是Live Server

Live Server是一款方便的Web开发工具,可以在开发过程中提供实时预览和自动刷新的功能。无需手动刷新网页,开发者可以实时查看对代码的修改,并快速验证效果,但是不能用于部署最终站点。

Live Server的工作原理

Live Server会在本地启动一个服务器,用于加载和运行项目,端口号为5500

它会在服务器和浏览器间建立一个WebSocket链接,监听指定的文件夹中的文件系统事件,比如文件的创建、修改和删除,以此来监听文件夹中文件的变化,比如HTML、CSS和Javascript文件。

当监听到文件发生变化时,服务器将对应的事件信息发送给浏览器,于是浏览器可自动刷新页面,加载最新的资源,让开发者立刻看到最新的效果。

如何实现

为了实现这个效果,Live server服务器为每个请求的html文件注入一小段JavaScript代码。这个脚本建立了web套接字连接并监听重载请求。通过从DOM中查找引用的样式表,并触发浏览器再次获取并解析它们,可以刷新CSS文件,而无需整页重新加载。

打开chome控制台,发现多了一小段JavaScript代码(我们以vue2学习笔记2-老规矩,从Hello World开始,了解Vue实例和模板-CSDN博客中的代码为例)

ce6030a48a494063921eb0f39e5a9d6a.png

Live server config

这段代码以后再读。我们先来看看live server的配置项

VS code中File->Preference->Settings中,找到extensions->Live server config,如有需要,在这里修改默认配置,比如默认端口,浏览器,需要忽略的文件修改等。。。

56c162f9eca54000a7cb74492f11641b.png

好吧,以我现在的能力,没啥需要修改的。了解到这里,我觉得目前对我来说就足够了。以后若有更深的需要,再来补充。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/376987.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MFC Ribbon菜单 - 中英文实时切换方法

简介 最近在搞一个老外的项目,本来谈的好好的,纯英文界面。项目接近尾声了,又提出了中英文实时切换的新需求,没办法就只能想办法,毕竟客户最大嘛。 实现方法 还好本来的ribbon英文菜单不复杂,就用纯C编码…

【两大3D转换SDK对比】HOOPS Exchange VS. CAD Exchanger

在现代工业和工程设计领域,CAD数据转换工具是确保不同软件系统间数据互通的关键环节。HOOPS Exchange和CAD Exchanger是两款备受关注的工具,它们在功能、支持格式、性能和应用场景等方面有着显著差异。 本文将从背景、支持格式、功能和性能、应用场景等…

网络安全设备——EDR

网络安全中的EDR(Endpoint Detection and Response,端点检测与响应)是一种主动式的端点安全解决方案,它专注于监控、检测和响应计算机和终端设备上的安全威胁。以下是EDR的详细解释: 一、定义与功能 EDR是一种网络安…

第三方配件也能适配苹果了,iOS 18与iPadOS 18将支持快速配对

苹果公司以其对用户体验的不懈追求和对创新技术的不断探索而闻名。随着iOS 18和iPadOS 18的发布,苹果再次证明了其在移动操作系统领域的领先地位。 最新系统版本中的一项引人注目的功能,便是对蓝牙和Wi-Fi配件的配对方式进行了重大改进,不仅…

若依(RuoYi)开源框架-登录

学习目标: 使用,减少自己的工作量 学习优秀开源项目底层的编程思想,设计思路,提高自己的编程能力 环境要求:jdk1.8 MySQL Redis Maven Vue 使用若依: 1.下载并运行 2.看懂业务流程 3.进行二次开发 1.登录 …

【微信小程序开发】如何定义公共的js函数,其它页面可以调用

在微信小程序开发中,可以通过以下步骤定义和使用公共的 JS 函数,使得其它页面可以调用: 1. 创建一个公共的 JS 文件:在项目的 utils 目录下创建一个 JS 文件,例如 utils/util.js。 2. 定义公共函数:在 uti…

QUIC的Stream

QUIC的流介绍 Streams in QUIC provide a lightweight, ordered byte-stream abstraction to an application. Streams can be unidirectional or bidirectional. QUIC allows for an arbitrary number of streams to operate concurrently and for an arbitrary amount of da…

搞定ES6同步与异步机制、async/await的使用以及Promise的使用!

文章目录 同步和异步async/awaitPromisePromise的概念 同步和异步 ​ 同步:代码按照编写顺序逐行执行,后续的代码必须等待当前正在执行的代码完成之后才能执行,当遇到耗时的操作(如网络请求等)时,主线程会…

MySQL高级面试点

Explain语句结果中各个字段分别代表什么 id:查询语句没出现一个select关键字,MySQL就会给他分配一个唯一id select_type: select关键字对应哪个查询的类型 simple:简单的查询 不包含任何子查询 primary:查询中如果…

TongRDS 2214 docker版指引(by lqw )

文章目录 前言准备工作中心节点服务节点哨兵节点 前言 部署docker版本,建议先参考TongRDS2214手动部署版指引(by lqwsy) 在本地手动部署了一套适合业务场景的rds 服务后,再通过dockerfile 打镜像。 准备工作 1.准备对应的安装包…

【大语言模型】私有化搭建-企业知识库-知识问答系统

下面是我关于大语言模型学习的一点记录 目录 人工智能学习路线 MaxKB 系统(基于大语言模型的知识问答系统) 部署开源大语言模型LLM 1.CPU模式(没有好的GPU,算力和效果较差) 2.GPU模式(需要有NVIDIA显卡支持) Ollama网络配置 Ollama前…

Android 自定义Edittext 和TextView 提示文字和填入内容不同的粗细组件

近期项目中又EditText 以及TextView 这两个组件需要用到提示文字 以及 填入文字要保持不同的粗细程度,所以记录一下 首先 是EditText 组件的自定义 BLEditText 继承的这个组件是一个三方的组件,可以在很大程度上减少drawable的编写,有兴趣的可以去相关的Git去看一下 点击查看,…

Elasticsearch:介绍 retrievers - 搜索一切事物

作者:来自 Elastic Jeff Vestal, Jack Conradson 在 8.14 中,Elastic 在 Elasticsearch 中引入了一项名为 “retrievers - 检索器” 的新搜索功能。继续阅读以了解它们的简单性和效率,以及它们如何增强你的搜索操作。 检索器是 Elasticsearc…

Redis的安装配置及IDEA中使用

目录 一、安装redis,配置redis.conf 1.安装gcc 2.将redis的压缩包放到指定位置解压 [如下面放在 /opt 目录下] 3.编译安装 4.配置redis.conf文件 5.开机自启 二、解决虚拟机本地可以连接redis但是主机不能连接redis 1.虚拟机网络适配器网络连接设置为桥接模式…

Spark RDD优化

Spark RDD优化 一、分区优化二、持久化优化三、依赖优化四、共享变量优化五、提交模式与运行模式优化六、其他优化 一、分区优化 分区数调整:RDD的分区数可以通过repartition和coalesce方法进行调整。合理的分区数可以提高并行度,但过多的分区会增加管…

HarmonyOS 界面开发基础篇

一、布局思路 ArkUI(方舟开发框架)是一套 构建 鸿蒙应用 界面 的框架。 构建页面的最小单位就是“组件”。 组件分类 基础组件:界面呈现的基础元素。 如:文字、图片、按钮等。容器组件:控制布局排布。 如:Row行、Column列等。…

Window10下安装WSL-Ubuntu20.04

1.开启并更新WSL 1.1开启WSL 首先先来看一下电脑是否能够开启WSL:待补充... 然后再来看一下如何开启WSL:win->设置->应用->应用和功能->程序和功能,如下所示: 最后选择启用或关闭Windows功能,开启两个选项:1.Hyper-V…

C++中链表的底层迭代器实现

大家都知道在C的学习中迭代器是必不可少的,今天我们学习的是C中的链表的底层迭代器的实现,首先我们应该先知道链表的底层迭代器和顺序表的底层迭代器在实现上有什么区别,为什么顺序表的底层迭代器更加容易实现,而链表的底层迭代器…

Golang | Leetcode Golang题解之第235题二叉搜索树的最近公共祖先

题目&#xff1a; 题解&#xff1a; func lowestCommonAncestor(root, p, q *TreeNode) (ancestor *TreeNode) {ancestor rootfor {if p.Val < ancestor.Val && q.Val < ancestor.Val {ancestor ancestor.Left} else if p.Val > ancestor.Val && q…

Dify中的工具

Dify中的工具分为内置工具&#xff08;硬编码&#xff09;和第三方工具&#xff08;OpenAPI Swagger/ChatGPT Plugin&#xff09;。工具可被Workflow&#xff08;工作流&#xff09;和Agent使用&#xff0c;当然Workflow也可被发布为工具&#xff0c;这样Workflow&#xff08;工…