前端可视化编程：liveReload安装，sublime 3

最新推荐文章于 2024-05-17 07:39:15 发布

Zora1205060540010

最新推荐文章于 2024-05-17 07:39:15 发布

阅读量1.1k

点赞数

文章标签：可视化编程前端插件

需要插件
sublime text3：View in Browser；LiveReload

chrome：liveReload

配置方法

一：sublime text3

sublime 3下载地址：

1、在sublime text3安装插件 view in browser

ctrl+shift+p
 
 1
 
 1

输入install package回车
 
 1
 
 1

这里写图片描述

view in browser
 
 1
 
 1

2、安装成功后，修改默认的浏览器：

preferences->package setting->view in browser->setting default
 
 1
 
 1

把firefox改为chrome64

这里写图片描述

3、在sublime text3安装插件liveReload

ctrl+shift+p
 
 1
 
 1

输入install package回车
 
 1
 
 1

liveReload
 
 1
 
 1

这里写图片描述

4、liveReload配置

preferences -> Packge Settings -> LiveReload -> Settings - Default
 
 1
 
 1

这里写图片描述

输入以下内容保存即可

{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"
    ]
}
 
 1
2
3
4
5
6
 
 1
2
3
4
5
6

二、 chrome浏览器安装liveReload插件

1、

方法一：进入chrome插件中心，搜索liveReload，安装即可。
 
 1
 
 1

这里写图片描述

方法二：如果进不到插件中心，下载安装包安装到chrome浏览器：
 
 1
 
 1

2、进入chrome扩展程序页面，将livereload中的允许访问文件网址打上勾

这里写图片描述

三、测试
重新打开sublime text3，重新启动chrome。
在sublime text3编辑一个测试html文件，

<html>
<meta charset="UTF-8">
<body>
<h1>开心</h1>
<p>自动刷新</p>
</body>
</html>
 
 1
2
3
4
5
6
7
 
 1
2
3
4
5
6
7

按 ctr+alt+v 在chrome浏览器中运行，编辑器下方出现livereload提示，并且点击chrome浏览器的livereload图标中间小圆点由虚变实，说明配置成功。

这里写图片描述

重点内容：只需要在sublime text3里编辑代码，按 ctr+s 保存，即可在chrome里面看到实时更新。

这里写图片描述

如果没有成功自动刷新，把以下走一遍：

1、找到packages文件夹

这里写图片描述

3、解压，重命名为LiveReload，拷贝到packages中

关注