前端可視化編程：liveReload安裝，sublime 3

時間  2020-06-07
標籤 前端 可視化 編程 livereload 安裝 sublime 简体版
原文   原文鏈接

須要插件 
sublime text3：View in Browser；LiveReloadhtml

chrome：liveReloadgit

配置方法github

一：sublime text3chrome

sublime 3下載地址：json

http://download.csdn.net/download/reggergdsg/9541966sublime-text

一、在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）bash

ctrl+shift+p
  • 1
  • 1
輸入install package回車
  • 1
  • 1

這裏寫圖片描述

view in browser
  • 1
  • 1

二、安裝成功後，修改默認的瀏覽器：sublime-text-3

preferences->package setting->view in browser->setting default
  • 1
  • 1

把firefox改成chrome64編輯器

這裏寫圖片描述

三、在sublime text3安裝插件liveReload

ctrl+shift+p
  • 1
  • 1
輸入install package回車
  • 1
  • 1
liveReload
  • 1
  • 1

這裏寫圖片描述

四、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

2、 chrome瀏覽器安裝liveReload插件

一、

方法一：進入chrome插件中心，搜索liveReload，安裝便可。
  • 1
  • 1

這裏寫圖片描述

方法二：若是進不到插件中心，下載安裝包安裝到chrome瀏覽器：
  • 1
  • 1

http://download.csdn.net/download/weixin_36401046/9659158

二、進入chrome擴展程序頁面，將livereload中的容許訪問文件網址打上勾

這裏寫圖片描述

3、測試 
從新打開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裏面看到實時更新。

這裏寫圖片描述

若是沒有成功自動刷新，把如下走一遍：

一、找到packages文件夾

這裏寫圖片描述

這裏寫圖片描述

二、從https://github.com/Grafikart/ST3-LiveReload 下載壓縮包到本地

三、解壓， 重命名爲LiveReload，拷貝到packages中

參考文獻：http://blog.csdn.net/neet007/article/details/51694643

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程