前端可视化编程: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中

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

原文地址:https://www.cnblogs.com/Yimi/p/8436053.html

时间: 2024-09-29 21:54:31

前端可视化编程:liveReload安装,sublime 3的相关文章

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

原文地址:http://blog.csdn.net/jason0539/article/details/21219043 一直做在安卓用xml作界面,对于java的控件不熟悉,也不习惯用代码做UI尤其是布局. 找了一下发现可以安装windowbuilder来实现java的可视化编程,但是很多资料里的连接都失效了. 刚自己弄完比较熟悉,总结一下希望能帮到. 我是直接在线安装的windowbuilder 一.找到对应版本的windowbuilder 打开这个链接:http://www.eclipse

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

Atitit.可视化编程jbpm6 的环境and 使用总结... 1. Jbpm的意义 1 2. Jbpm6环境配置 2 2.1. Down 2 2.2. Install eclipse jbpm plugin 2 2.3. Set Jbpm6_Runtimes 2 3. 顺序执行的流程配置 3 3.1. Cretae demo prj 执行自动生成的测试代码 3 3.2. 建立新的流程bpmn文件 3 3.3. 添加start 跟end控件 4 3.4. 添加一个script task控件..

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

前言:搜了半天,各种推荐,什么十大工具啦.优秀工具集合啦之类的咸淡文章,就是没有一个讲怎么弄的.配合官网的article自己研究了半天总算配置好了.顺便吐槽下官网关于sass/less设置这块说的模糊不清的.写个教程给大家,相信会对新手们有帮助的. 声明:本文不涉及Grunt. 开发环境:windows7 编辑器:sublime text3 浏览器:firefox31 介绍 一般前端写页面,修改了html or css要想看效果通常就得 Alt+Tab,切换到浏览器,然后F5刷新,时间久了….

[转]Centos 安装Sublime text 3

本文简单介绍在CentOS上安装Sublime text 3, 转自:Centos 安装Sublime text 3 Step 1 :建立软件安装目录 # mkdir /opt # cd /opt Step 2 :下载安装包 到官网下载安装包,或者使用如下命令: wget http://c758482.r82.cf2.rackcdn.com/sublime_text_3_build_3083_x64.tar.bz2 Step 3:解压 tar jxvf sublime_text_3_build_

Ubuntu16.04安装sublime text 3并配置Python开发环境

打开终端,添加sublime text 3的仓库: sudo add-apt-repository ppa:webupd8team/sublime-text-3 按enter键继续 更新软件库: sudo apt-get update 安装Sublime Text 3: sudo apt-get install sublime-text-installer 安装package control: ctr+`调出控制台然后粘贴如下python代码: import urllib.request,os,

20170126,安装Sublime Text 3,破解,汉化

官网: http://www.sublimetext.com/3 汉化包:下载地址: http://img.xiumu.org/blog-uploads/2013/02/Sublime_Text_CN.zip 第一步, 安装Sublime Text 3 第二步, 网上找个能用的注册码,我之前找破解方案的时候是有注册机的,但是似乎用不成了 这里,引用本站隔壁博主 胡小生 文章中的注册码(我注册成功) -– BEGIN LICENSE -– Michael Barnes Single User Li

XIB可视化编程

1.xib可视化编程只提供一个UI界面,创建新的类的时候勾选生成xib文件,就会生成对应的xib文件,xib GUI:图形?用户界?面(Graphical User Interface,简称 GUI,?又称图形?用户接?口)是指采?用图形?方式显?示的计算机操作?用户界?面. Interface Builder(简称IB):是Mac OS X平台下?用于设计和测试图形?用户界?面(GUI)的应?用程序.代码和IB都可以?成GUI. 优势:IB能够使开发者简单快捷的开发出符合Mac系列操作系统的G

ubuntu 安装sublime并激活

1:add-apt-repository ppa:webupd8team/sublime-text-3加载sublime的源2:sudo apt-get update更新源 3:sudo apt-get install sublime-text-installer安装sublime4:ctrl+-然后在控制台中输入下面的代码,安装工具包import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.i

安装Sublime Text 2插件的方法

1.直接安装 安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages). 2.使用Package Control组件安装 也可以安装package control组件,然后直接在线安装: 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音) 粘贴以下代码到底部命令行并回车:import urllib2,os;pf='Package