前端自动化刷新工具 live-server 的介绍与使用方法

最新推荐文章于 2024-10-03 20:24:17 发布
最新推荐文章于 2024-10-03 20:24:17 发布
阅读量4.3k 收藏 1
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SundayAaron/article/details/79675565
版权

前言介绍

前端开发调试的时候以前总需要不断的刷新看效果，效率很差。

使用live-server后，当鼠标离开编辑器之后会自动为我们刷新浏览器。

liver-server的安装

使用cnpm全局安装

cnpm install -g live-server

liver-server的使用

windows下 在cdm切换到当前项目目录，输入命令 
live-server

即可。

如图：


SundayAaron
关注
专栏目录
前端原生开发的一些自动化处理
OUDUIDUI的博客
03-31 291
Github 初始目录设置 在最初将文件进行合理归纳，有助于后期的项目打包工作。 ├─index.html # HTML页面 ├─src | ├─static # 静态文件路径 | | └favicon.png | ├─js # JavaScript文件路径 | | └main.js | ├─css .
前端开发：实时刷新（及时预览）工具小汇总，兼有gulp+browser-sync设置方法
hahahhahahahha123456的博客
05-07 1618
自己写标签： 实时刷新、 免F5、 gulp + browser-sync开门见山，首先讲明一下本文的定位吧：写这篇文章是因为自己在平时的学习中，一次次试验了很多的前端实时刷新工具，有顺手的，有蹩脚的，有简单的，有麻烦的，安装完又折腾，折腾完又卸载，体验完这些也着实花费了不少时间，就在昨天又刚刚折腾完gulp+browser-sync的方法，估计可以让我消停一阵子了。这篇文章主要介绍和汇总一下我用...
使用live-server快速搭建本地服务器+自动刷新的方法
11-26
1、安装 $ sudo npm install -g live-server 2、使用下面的命令会自动打开当前目录下面的index.html $ live-server 以上这篇使用live-server快速搭建本地服务器+自动刷新的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
live-server 的使用
乐辞的博客
10-24 5646
live-server 是一款 npm 工具，全局安装 npm i -g live-server 后，项目目录使用 live-server 命令行命令便可直接在浏览器中预览（默认找 index.html，其他需要带上文件名空格后跟在后面），并且自动全局监听实时更新。但现在流行修改文件浏览器自动刷新 hot socketing（热拔插），如 live-reload。本地开发常常需要搭建临时的服务，第一时间我们会想到用 http-server。而 live-server 实现了上面这三个插件的功能。
code server和live server看你目的和工具决定:两者优点了解
最新发布
2401_87572615的博客
10-03 218
总的来说， Live Server 更适合本地开发和快速原型制作，而 code-server 提供了一个完整的云端VS Code体验，适合更复杂的开发场景和团队合作。Live Server 是一个VS Code插件，它为前端开发者提供便捷的本地开发服务器，并支持实时页面重载功能，特别适合静态和动态网页的快速迭代开发。code-server 允许你在任何地方通过浏览器访问运行在服务器上的VS Code实例，它继承了VS Code的使用逻辑和丰富的插件生态。
web服务器live-server的安装及使用
热门推荐
Hello，陌生人^o^。遇见你真好...
07-10 1万+
在写一下简单的项目或学习一些技术的练习，没有服务器的话，每次写的代码都需要手动刷新浏览器。有点无奈，但是如果你安装了这个live-server 服务器就可以不用手动刷新，实时预览自己写的代码了。 （一）安装 1.前提条件需要node.js和npm的依赖（可以自己先搞定，不难）； 2.使用npm全局安装：npm install -g live-server（本人使用淘宝镜像安装的） （二...
linux前端单机自动化更新部署
fengchangtong110的博客
01-10 198
linux前端单机自动化更新部署
live-server
weixin_45581741的博客
09-02 383
插件使用方式
前端开源库-fe-dev-server
08-29
【前端开源库-fe-dev-server】是一个专为前端开发者设计的开发服务器工具，它极大地优化了前端项目的构建和调试流程。这个库旨在提供一个快速、高效且功能丰富的开发环境，使得前端工程师可以更专注于代码编写，而...
前端开源库-webpack-livereload-plugin
08-30
此外，为了提高开发效率，你可以配合使用诸如ESLint这样的代码质量检查工具，以及Prettier进行代码格式化，这样在每次保存时，不仅可以实时查看代码变化，还能确保代码风格的一致性和无语法错误。 总的来说，...
live-server的用法
i_yuanpeng的博客
05-12 2900
这是一款带有热加载功能的小型开发服务器。用它来展示你的HTML / JavaScript / CSS，但不能用于部署最终的网站。 在前端开发的过程中，有时候希望页面实时刷新，这时候就可以用到live-server
推荐：Live Server — 实时开发服务器
gitblog_00006的博客
05-11 1167
推荐：Live Server — 实时开发服务器 项目地址:https://gitcode.com/gh_mirrors/vs/vscode-live-server Live Server 是一个专为前端开发者设计的本地开发服务器，它带有实时刷新功能，适用于静态和动态页面。无论你是PHP开发者还是JavaScript爱好者，这款Visual Studio Code插件都能让你的开发流程更加流畅。 ...
Live Server(实时服务器)
guoqkmiss的博客
06-28 4965
Live Server(实时服务器) 两个原因： file://由于安全限制，AJAX请求不适用于该协议，即，如果您的站点通过JavaScript获取内容，则您需要一台服务器。 文件更改后自动重新加载页面可以加快开发速度。 安装 npm 安装 npm install -g live-server 手动模式 git clone https://github.com/tapio/live-server cd live-server npm install # Local dependencies if
live-server安装与使用
simpleshao的博客
12-21 7968
原文链接：https://www.jianshu.com/p/6661aaebf412 live-server是一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。 使用live-server，首先需要安装它： npm in...
java开发工具-------前端自动化刷新工具 live-server 的介绍和使用
一个人在上海的博客
07-29 721
今天敲项目，发现一个一直在用的工具不是很明白，百度谷歌后，使用原本的项目进行了一些简单的测试，有种豁然开朗的感觉。话不多说，上步骤。（准备带截图的，发现截图没有传成功，有点气，不过说的还算明白^~^）   优势：使用live-server后，当鼠标离开编辑器之后会自动为我们刷新浏览器。   1,确认是否安装node环境，检查版本，出现版本号表明安装成功     2,使用npm 安装...
grunt-server:基于grunt的server
06-30
总结，`grunt-server` 结合 Grunt 提供了一个高效的本地开发环境，通过自动化和实时刷新功能，帮助开发者更专注于代码编写，提高工作效率。了解并熟练使用 Grunt 及其插件，对于前端开发者来说是非常重要的技能之一...
live-server实时简易服务器
海阔天空
04-06 490
live-server实时简易服务器
live-server安装
分享式获得也是一种学习的态度
09-09 743
live-server作为web server来部署Html和JavaScript，并运行在浏览器中。live-server轻量且简单，初学者首选。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值