前端可视化编程：liveReload安装，sublime 3
需要插件
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+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
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中
