需要插件 
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中

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

前端可视化编程：liveReload安装，sublime 3的更多相关文章

  1. java可视化编程-eclipse安装windowbuilder插件(转载)

    原文地址:http://blog.csdn.net/jason0539/article/details/21219043 一直做在安卓用xml作界面,对于java的控件不熟悉,也不习惯用代码做UI尤其 ...

  2. 前端可视化开发-livereload

    在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过 ...

  3. 重磅：前端 MVVM 与 FRP 的升阶实践 —— ReRest 可视化编程

    ReRest (Reactive Resource State Transfer) 是前端开发领域新兴的方法论体系,它继承了 MVVM 与 FRP 编程理念,在技术上有不少创新.本文从专利稿修改而来, ...

  4. 【编程工具】Sublime Text3的安装和常用插件推荐

    本人刚刚学习 HTML,曾经上网找过一些编写 HTML 的软件,但感觉都不太好,经过三挑四选下,最终我决定选择 Sublime Text3 这款软件来作为学习工具,上网找到了许多实用的插件,在这里给大 ...

  5. Atitit.可视化编程jbpm6 的环境and 使用总结...

    Atitit.可视化编程jbpm6 的环境and 使用总结... 1. Jbpm的意义 1 2. Jbpm6环境配置 2 2.1. Down 2 2.2. Install eclipse jbpm p ...

  6. 前端自动化神器LiveReload配合浏览器和less/sass使用方法

    前言:搜了半天,各种推荐,什么十大工具啦.优秀工具集合啦之类的咸淡文章,就是没有一个讲怎么弄的.配合官网的article自己研究了半天总算配置好了.顺便吐槽下官网关于sass/less设置这块说的模糊 ...

  7. ubuntu安装sublime教程

    1.安装Sublime Text 3 及常用的神器插件 ①首先添加sublime text 3的仓库:sudo add-apt-repository ppa:webupd8team/sublime-t ...

  8. Python数据可视化编程实战pdf

    Python数据可视化编程实战(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1vAvKwCry4P4QeofW-RqZ_A 提取码:9pcd 复制这段内容后打开百度 ...

  9. [转]Centos 安装Sublime text 3

    本文简单介绍在CentOS上安装Sublime text 3, 转自:Centos 安装Sublime text 3 Step 1 :建立软件安装目录 # mkdir /opt # cd /opt S ...

随机推荐

  1. 【WPF】屏幕右下角消息提示框

    WPF做一个仿QQ的右下角消息提示窗,网上找到几个Demo后,选了一个比较好用的. 博客 http://blog.csdn.net/huangli321456/article/details/5052 ...

  2. 使用Task代替ThreadPool和Thread

    转载:改善C#程序的建议9:使用Task代替ThreadPool和Thread 一:Task的优势 ThreadPool相比Thread来说具备了很多优势,但是ThreadPool却又存在一些使用上的 ...

  3. Go Revel - Templates（模板）

    revel使用Go官方的模板库.它会在两个目录查找模板文件: 1.应用的`views`目录以及它的所有子目录 2.revel库自己的`templates`目录 revel为错误页面提供了模板(在`de ...

  4. android开发(34) 自定义 listView的分割线（ 使用xml drawable画多条线）

    我遇到这样一个场景,我需要自定义 listView的分割线,而这个分割线是由两条线组成的,在使用xml drawable时遇到了困难. 注释:画两条线是为了实现 凹陷的效果,在绘图中一条暗线紧跟着一条 ...

  5. 线段树 + 区间更新： HDU 4893 Wow! Such Sequence!

    Wow! Such Sequence! Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  6. 微信小程序——实现动画循环播放

    今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以 ...

  7. linux下shellcode提取常用到的命令

    汇编语言的汇编指令: nasm -f elf xxx.asm    生成xxx.o文件 ld -o xxx  xxx.o  生成可执行文件,不用加参数-s ,否则在提取shellcode的十六进制码的 ...

  8. 如何将Mac系统OS X Yosemite装到外部磁盘？（转）

    有Mac用户想了解是否可以将 OS X Yosemite 装到替代的外部磁盘,答案是肯定的,有需求的用户,可以按照本篇教程逐步进行. 前面我已经写过一篇文章介绍了如何安装 OS X Yosemite ...

  9. Navdeep Jaitly

    中文名:耐迪普 杰特尼 早期: 印度科技大学 1994-1995 滑铁卢大学 1998-2000 博士: 多伦多大学 Hinton实验室 2008-2014 工作: 谷歌大脑 2014-2017 英伟 ...

  10. mysql查询常用小语句

    mysql  查询某个库里表的数量 在mysql中有个数据库information_schema下的表tables记录了所有数据库中所有的表相关信息 TABLE_SCHEMA 数据库名称 SELECT ...