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

来源：互联网发布：网购电影票软件编辑：程序博客网时间：2024/06/05 23:48

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

chrome：liveReload

配置方法

一：sublime text3

sublime 3下载地址：

http://download.csdn.net/download/reggergdsg/9541966

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

注意（安装插件之前先安装Package Control：
http://blog.csdn.net/weixin_36401046/article/details/52880000，
http://devework.com/sublime-text-3-package-control.html）

ctrl+shift+p1
1

输入install package回车1
1

这里写图片描述

view in browser1
1

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

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

把firefox改为chrome64

这里写图片描述

3、在sublime text3安装插件liveReload

ctrl+shift+p1
1

输入install package回车1
1

liveReload1
1

这里写图片描述

4、liveReload配置

preferences -> Packge Settings -> LiveReload -> Settings - Default1
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

http://download.csdn.net/download/weixin_36401046/9659158

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文件夹

这里写图片描述

2、从https://github.com/Grafikart/ST3-LiveReload 下载压缩包到本地

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

参考文献：http://blog.csdn.net/neet007/article/details/51694643

阅读全文

0 0