前端可视化编程：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中
前端可视化编程：liveReload安装，sublime 3的更多相关文章
- java可视化编程-eclipse安装windowbuilder插件(转载)
原文地址:http://blog.csdn.net/jason0539/article/details/21219043 一直做在安卓用xml作界面,对于java的控件不熟悉,也不习惯用代码做UI尤其 ...
- 前端可视化开发-livereload
在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过 ...
- 重磅：前端 MVVM 与 FRP 的升阶实践 —— ReRest 可视化编程
ReRest (Reactive Resource State Transfer) 是前端开发领域新兴的方法论体系,它继承了 MVVM 与 FRP 编程理念,在技术上有不少创新.本文从专利稿修改而来, ...
- 【编程工具】Sublime Text3的安装和常用插件推荐
本人刚刚学习 HTML,曾经上网找过一些编写 HTML 的软件,但感觉都不太好,经过三挑四选下,最终我决定选择 Sublime Text3 这款软件来作为学习工具,上网找到了许多实用的插件,在这里给大 ...
- Atitit.可视化编程jbpm6 的环境and 使用总结...
Atitit.可视化编程jbpm6 的环境and 使用总结... 1. Jbpm的意义 1 2. Jbpm6环境配置 2 2.1. Down 2 2.2. Install eclipse jbpm p ...
- 前端自动化神器LiveReload配合浏览器和less/sass使用方法
前言:搜了半天,各种推荐,什么十大工具啦.优秀工具集合啦之类的咸淡文章,就是没有一个讲怎么弄的.配合官网的article自己研究了半天总算配置好了.顺便吐槽下官网关于sass/less设置这块说的模糊 ...
- ubuntu安装sublime教程
1.安装Sublime Text 3 及常用的神器插件 ①首先添加sublime text 3的仓库:sudo add-apt-repository ppa:webupd8team/sublime-t ...
- Python数据可视化编程实战pdf
Python数据可视化编程实战(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1vAvKwCry4P4QeofW-RqZ_A 提取码:9pcd 复制这段内容后打开百度 ...
- [转]Centos 安装Sublime text 3
本文简单介绍在CentOS上安装Sublime text 3, 转自:Centos 安装Sublime text 3 Step 1 :建立软件安装目录 # mkdir /opt # cd /opt S ...
随机推荐
- 简单的Http请求数据保存到Hdfs
使用okhttp工具集来开发:(如果文件已经存在会报错) package com.etl; import java.io.IOException; import org.apache.commons. ...
- 【html】优酷视频去广告代码
相信大家都有这样的感受,看个视频有个30秒的广告,让人非常的不爽.同样对于我们前端童鞋来说,为了吸引用户,把制作好的视频嵌入到网页中,结果因为视频有30秒的广告不但没有吸引到多少用户,反而可能会流失一 ...
- 解决EasyUi中的DataGrid删除一条记录后，被删除的数据仍处于被选中状态问题
项目中遇到这么一个问题,在easyui的datagrid中,删除一条记录成功,重新加载datagrid后,去点编辑操作,仍可把之前删除掉的那条记录进行编辑操作,正常情况应该是,删除后再去点击“编辑”, ...
- 修改Windows和linux系统时间
1.修改本机Windows的系统时间,Java代码实现: import java.io.IOException; import java.text.SimpleDateFormat; import j ...
- XXXXX
http://www.java-gaming.org/topics/laser-fx-opengl-libgdx/25402/view.html Libgdx游戏引擎之Dialog组件 http:// ...
- 22 Best Sites To Download Free Sprites
http://unity3diy.blogspot.com/2014/11/Free-Sprites-Download-For-YourGames.html ————————————————————— ...
- css关于定位那些事情
css绝对定位.相对定位和文档流的那些事 前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料 ...
- Python 字符串操作函数一
#-*- coding:utf-8 -*- strword = "i will fly with you , fly on the sky ." #find print(strwo ...
- Python 字典的操作
#-*- coding:utf-8 -*- people = {"name":"jack","age":18,"addr" ...
- Linux中通过/proc/stat等文件计算Cpu使用率
Linux平台Cpu使用率的计算 proc文件系统 /proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以文件系统的方式为内核与进程提供通信的接口.用户和应用程序可以通过/pro ...