需要插件 
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. C语言 · 陶陶摘苹果2

    算法提高 陶陶摘苹果2   时间限制:1.0s   内存限制:256.0MB      问题描述 陶陶家的院子里有一棵苹果树,每到秋天树上就会结出n个苹果.苹果成熟的时候,陶陶就会跑去摘苹果.陶陶有个 ...

  2. <要做股市赢家：杨百万>读书笔记

    书在这里 和这里: 要注意的是,并不是政府每出台一个政策股价就要变.如果听到各种消息,市场却没有反应,就不要去做这个聪明人.有消息后应该密切关注市场反应,看成交量.价格的变化等等,再作决定.总之,关键 ...

  3. SecureCRT ，可是进入模拟器后TAB键还是无法补全

    SecureCRT是做网络,路由,交换机等设备的人都知道的工具 ,可是进入模拟器后TAB键还是无法补全,就很懊恼了. 设置步骤: 1)打开SecureCRT软件,选项—全局选项—常规—默认的会话设置— ...

  4. 使用taskset命令来限制进程的CPU

    常常感觉系统资源不够用,一台机子上跑了不下3个比较重要的服务,但是每天我们还要在上面进行个备份压缩等处理,网络长时间传输,这在就很影响本就不够用的系统资源: 这个时候我们就可以把一些不太重要的比如co ...

  5. R语言-向量化操作（apply、tapply、lapply、sapply、mapply、table等）

    一.apply函数(对一个数组按行或者按列进行计算): 使用格式为:apply(X, MARGIN, FUN, ...) 其中X为一个数组:MARGIN为一个向量(表示要将函数FUN应用到X的行还是列 ...

  6. Javascript动态操作CSS总结

    一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left ...

  7. 用css3实现社交分享按钮

    以前实现按钮一般都是用图片来实现的,特别是一些拥有质感的按钮,今天练习了一些相关方面的的例子,用css3来实现Social Media Buttons html代码如下 <div class=& ...

  8. modelsim 出现此错误怎么办

    笔者的电脑装成了win8的系统,然后像平常一样打开modelsim,这时跳出如下图的界面: 笔者的modelsim之前是安装过的,所以这个界面已经说明,当前的许可证没有安装好.解决上述问题的办法是重新 ...

  9. Relu的理解

    ReLU上的花样 CNN出现以来,感觉在各个地方,即便是非常小的地方都有点可以挖掘.比如ReLU. ReLU的有效性体现在两个方面: 克服梯度消失的问题 加快训练速度 而这两个方面是相辅相成的,因为克 ...

  10. 【转】【Python】python使用urlopen/urlretrieve下载文件时出现403 forbidden的解决方法

    第一:urlopen出现403 #!/usr/bin/env python # -*- coding: utf- -*- import urllib url = "http://www.go ...