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,如有需要,在这里修改默认配置,比如默认端口,浏览器,需要忽略的文件修改等。。。

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

相关推荐
laplace012331 分钟前
Claude Code 逆向工程报告 笔记(学习记录)
数据库·人工智能·笔记·学习·agent·rag
lingggggaaaa35 分钟前
安全工具篇&Go魔改二开&Fscan扫描&FRP代理&特征消除&新增扩展&打乱HASH
学习·安全·web安全·网络安全·golang·哈希算法
宵时待雨1 小时前
STM32笔记归纳7:EXTI
笔记·stm32·单片机·嵌入式硬件
星夜泊客1 小时前
C# 基础:为什么类可以在静态方法中创建自己的实例?
开发语言·经验分享·笔记·unity·c#·游戏引擎
Daydream.V1 小时前
网页学习——HTML
学习
张永清-老清1 小时前
每周读书与学习->JMeter性能测试脚本编写实战(四)-利用JMeter对MySQL数据库查询进行性能测试
学习·jmeter·性能调优·jmeter性能测试·性能分析·每周读书与学习
InterestOriented2 小时前
中老年线上学习发展:兴趣岛“内容+服务+空间”融合赋能下的体验升级
人工智能·学习
宇钶宇夕2 小时前
CoDeSys入门实战一起学习(二十八):(ST)三台电机顺起逆停程序详解
运维·学习·自动化·软件工程
£漫步 云端彡2 小时前
Golang学习历程【第十篇 方法(method)与接收者】
开发语言·学习·golang
im_AMBER2 小时前
Leetcode 111 两数相加
javascript·笔记·学习·算法·leetcode