需要插件 
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. while do while和for语句用法

    while //循环 int i = 10; while(i > 0){ if(i==8) {i--; continue;//跳过 } System.out.println(--i); if(i ...

  2. Spark SQL讲解

    Spark SQL讲解 Spark SQL是支持在Spark中使用Sql.HiveSql.Scala中的关系型查询表达式.它的核心组件是一个新增的RDD类型SchemaRDD,它把行对象用一个Sche ...

  3. Android训练课程(Android Training) - 构建你的第一个应用

    本文翻译自:https://developer.android.com/training/basics/firstapp/index.html 构建你的第一个应用(app) 欢迎来到安卓开发! 这个课 ...

  4. ubuntu14.04 64位 安装搜狗输入法

    deb格式的搜狗输入法,搜狗拼音官网可以下载到 http://pinyin.sogou.com/linux/?r=pinyin (64位) 2.使用deb安装工具gdebi,这个工具能解决所有依赖问题 ...

  5. 【Android】解决Android横竖屏切换数据丢失问题的方法

    解决方案1:在Androidmanifest.xml的activity标签中加入android:screenOrientation="portrait",可以屏蔽横屏 <ac ...

  6. java.lang.ClassCastException: java.lang.Long cannot be cast to java.lang.Integer

    hibernate查询结果条数集 原写法: Integer count = (Integer )session.createQuery(hql).uniqueResult(); 报错:java.lan ...

  7. 3ds Max 中的导航控件SteeringWheels入门介绍

    介绍 软件环境:3d Max2015 SteeringWheels 3D导航控件也可以说是“追踪菜单”,通过它们可以使用户从单一的工具访问不同的2D和3D导航工具.SteeringWheels可分成多 ...

  8. 第三百八十五节，Django+Xadmin打造上线标准的在线教育平台—登录功能实现，回填数据以及错误提示html

    第三百八十五节,Django+Xadmin打造上线标准的在线教育平台—登录功能实现 1,配置登录路由 from django.conf.urls import url, include # 导入dja ...

  9. （弃）解读Openstack Identity API v2.0

    目前OpenStack社区提供了详尽的API文档,并配有丰富的说明和示例,关于Identity API v2查看这里, 关于Identity API v3请查看这里. 尽管现在官方已经不建议OpenS ...

  10. C#常用数据类型间的转换

    数据类型有很多种,数据类型间的转换也是有很多的方法,如果不细心整理的话等到用的时候再查就会显得很浪费时间,所以决心整理出这篇博文.主要是讲解常用数据类型之间的转换方法以及常见数据类型所占字节数. 字节 ...