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博客中的代码为例)

Live server config

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

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

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

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

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

相关文章

探索Conda的依赖迷宫:包依赖树的构建与解析

探索Conda的依赖迷宫:包依赖树的构建与解析 引言 在复杂的软件项目中,依赖管理是确保软件正常运行的关键。Conda作为流行的Python包管理器,提供了强大的依赖树功能,帮助用户理解和管理包依赖关系。本文将详细介绍如何在Conda中使…

个性化你的编码世界:深度定制PyCharm主题与字体

个性化你的编码世界:深度定制PyCharm主题与字体 引言 在编码的旅途中,一个舒适且个性化的环境能够显著提升开发体验。PyCharm作为业界领先的集成开发环境(IDE),提供了丰富的定制选项,允许用户根据个人喜好…

力扣--20. 有效的括号

目录 题目 思路 注意 题目 给定一个只包括 (,),{,},[,] 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括…

DP讨论——适配器模式

学而时习之,温故而知新。 敌人出招(使用场景) 说是自己的程序对接第三方的库,但是自己的代码的接口设计完毕了,如何对接上? 你出招 适配器模式就是为此而生的——我觉得应该是该解决方法被命名为了适配…

滞后序列分析案例详解

一个半小时 超出30分钟 日期:2024-07-13 19:14:33 回放 摘要 Python在行为分析中的应用 主要讲述了如何使用Python处理序列数据,以及如何结合定性分析和定量分析来全面分析课程内容。讲者提到了一种叫做分层法的分类方法,该方法使用了布鲁…

ArcGIS Pro SDK (九)几何 2 坐标

ArcGIS Pro SDK (九)几何 2 坐标 文章目录 ArcGIS Pro SDK (九)几何 2 坐标1 矢量极坐标2 获取矢量倾角3 获取矢量方位角4 向量运算5 2D 矢量操作6 生成器 环境:Visual Studio 2022 .NET6 ArcGIS Pro SDK 3.0 1 矢量…

知识图谱数据库基本知识

文章目录 知识图谱数据模型知识图谱查询语言随着知识图谱规模的日益增长,数据管理愈加重要。一方面,以文件形式保存的知识图谱显然无法满足用户的查询、检索、推理、分析及各种应用需求;另一方面,传统数据库的关系模型与知识图谱的图模型之间存在显著差异,关系数据库无法有…

ctfshow-web入门-php特性(web96-web99)

目录 1、web96 2、web97 3、web98 4、web99 1、web96 试了下通配、转义、拼接、大小写都不行 这里使用绝对路径或者当前路径绕过: ?u./flag.php ?u/var/www/html/flag.php 还可以使用 php 伪协议: ?uphp://filter/resourceflag.php 2、web97 关…

数据结构(Java):力扣Stack集合OJ题

1、括号匹配问题 . - 力扣(LeetCode) 1.1 思路分析 根据栈的先进后出原则,我们可以这样解决问题: 遍历字符串,遇见左括号就将左括号push入栈;遇见右括号就pop出栈,将出栈的元素和该右括号比较…

pyparsing开启调试

在要匹配的表达后添加set_debug

【密码学】实现消息认证或数字签名的几种方式

消息认证的目的是验证消息的完整性和确认消息的来源。数字签名的目的是不仅验证消息的完整性和来源,还提供了不可否认性。此外,数字签名还可以验证消息的创建时间,防止重放攻击。那么具体有哪些实现的方式呢? 一、仅提供消息认证…

python练习(if--else)

通过input语句获取键盘输入的身高 判断身高是否超过120cm,并通过print给出提示信息。 代码输出示例: 1.欢迎来到乐园。 请输入你的身高(cm):130 您的身高超出120cm,游玩需要够票10元。 祝您游玩愉快。 2…

文件内容查阅

cat concatenate files and print on the standard output Linux中一个最简单的且最常用的命令是cat命令。其功能是在终端设备上显示文件内容。 cat命令-n选项用于显示行号。 tac concatenate and print files in reverse tac命令的功能是用于反向显示文件内容,即…

计算机网络复习笔记【面向考纲整理】

计算机网络复习笔记 一、计算机网络体系结构(一)计算机网络的概念、分类、组成与功能1.计算机网络的概念、组成与功能1.1计算机网络的概念1.2计算机网络的组成1.3计算机网络的功能 2.计算机网络的分类3.计算机网络的标准化工作及相关知识 (二…

MT6816磁编码IC在工控机器人中的应用

在现代工业自动化领域,高精度的位置检测和控制技术对于机器人系统的稳定运行至关重要。MT6816磁编码IC作为一款先进的磁传感器解决方案,以其卓越的性能和稳定性,在工控机器人中得到了广泛的应用。本文将详细探讨MT6816磁编码IC在工控机器人中…

azure学习在日本IT工作的重要性

在日本数字化转型的浪潮中,微软Azure已经成为众多企业的首选云平台。作为全球第二大云服务提供商,Azure在日本市场的重要性与日俱增。本文将探讨为什么学习Azure对日本IT专业人士至关重要,以及如何通过lalapodo云原生技术的培训课程,快速掌握这一关键技能。 Azure在日本的战略地…

血液及造血系统疾病病人的护理

一、血液及造血系统疾病病人的基础护理 对于患有血液及造血系统疾病的病人,护理工作的重点首先在于密切监测生命体征,包括体温、心率、呼吸频率和血压。 饮食护理也十分关键,要保证病人摄入充足的营养,以增强抵抗力。例如&#xf…

【Django+Vue3 线上教育平台项目实战】构建高效线上教育平台之首页模块

文章目录 前言一、导航功能实现a.效果图:b.后端代码c.前端代码 二、轮播图功能实现a.效果图b.后端代码c.前端代码 三、标签栏功能实现a.效果图b.后端代码c.前端代码 四、侧边栏功能实现1.整体效果图2.侧边栏功能实现a.效果图b.后端代码c.前端代码 3.侧边栏展示分类及…

element UI时间组件两种使用方式

加油&#xff0c;新时代打工&#xff01; 组件官网&#xff1a;https://element.eleme.cn/#/zh-CN/component/date-picker 先上效果图&#xff0c;如下&#xff1a; 第一种实现方式 <div class"app-container"><el-formref"submitForm":model&q…

Linux C++ 052-设计模式之享元模式

Linux C 052-设计模式之享元模式 本节关键字&#xff1a;Linux、C、设计模式、享元模式 相关库函数&#xff1a; 概念 享元模式&#xff08;FlyWeight&#xff09;&#xff0c;运用共享技术有效的支持大量细粒度的对象。 典型的享元模式的例子为文书处理器中以图形结构来表…