前端可视化编程：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 ...
随机推荐
- WPF中的数据驱动
在WPF出现之前,Win Form,ASP.NET等技术均采用“事件驱动”理念,这种由“事件-订阅-事件处理器”关系交织在一起构成的程序,景观可以使用MVC.MVP等设计模式,但一不小心就会使界面逻辑 ...
- JavaScript 里面的整数 位 操作
JavaScript 整数位操作. 与 操作符 & val num1 = 10; val num2 = 11; val num3 = num1 & num2; // num3 == 1 ...
- Linxu 学习记录
1.配置Java人环境变量,设置后需要使用命令: source /etc/profile 让配置立即生效. # jdk7 settings JAVA_HOME=/usr/jdk1..0_79 JRE_ ...
- 如何安装docker-compose
docker-compose还是挺好用的~~~~~ 这里简单介绍下两种安装docker-compose的方式,第一种方式相对简单,但是由于网络问题,常常安装不上,并且经常会断开,第二种方式略微麻烦,但 ...
- 【驱动】——seq_file使用指南
seq_file只是在普通的文件read中加入了内核缓冲的功能,从而实现顺序多次遍历,读取大数据量的简单接口.seq_file一般只提供只读接口,在使用seq_file操作时,主要靠下述四个操作来完成 ...
- 【oneday_onepage】——Tastes differ!
You know Ian and Felton can be really boring sometimes. They're always arguing, like. like children. ...
- 安卓程序代写 网上程序代写[原]BluetoothSocket详解
一. BluetoothSocket简介 1. 简介 客户端与服务端 : BluetoothSocket 和 BluetoothServerSocket 类似于Java中的套接字的 Socket 和 ...
- Sword pcre库函数学习二
9.pcre_free_substring_list 原型: #include <pcre.h> void pcre_free_substring_list(const char **st ...
- 关于Mac上的开发工具
如果是JavaScript语言的话用 Intellij IDEA 如果是C/C++语言的话用 XCode
- SpringBoot系列八：SpringBoot整合消息服务（SpringBoot 整合 ActiveMQ、SpringBoot 整合 RabbitMQ、SpringBoot 整合 Kafka）
声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 1.概念:SpringBoot 整合消息服务 2.具体内容 对于异步消息组件在实际的应用之中会有两类: · JMS:代表作就是 ...