***起因***

在課程時被介紹到Live Server。
這是一款在Visual Studio Code上開發網頁時,可使用的一個很方便的延伸模組。
順便記錄一些大家在過程中遇到的問題~

 


 

***功用***

建立即時更新的本機伺服器,不需再存檔後重整頁面來確認與Debug(可以少按一次或N次F5)。

 


 

***首先安裝***

安裝Visual Studio Code後,在延伸模組(左側功能列最下方)中搜尋「Live Server」,就可以找到。

直接點按綠色的安裝 ( 安裝後該按鈕會變成藍色的"解除安裝" ) 

image


 

***如何運行***

  1. 先在Visual Studio Code中建立一個基本的簡單頁面。
    新增檔案後儲存成html 檔,輸入html:5後enter,就會帶出一個網頁所需要的基本標籤。
    ( 如果未儲存成html檔,html:5則不會有作用 )
    image
  2. 一般Live Server運行的方式有兩種
       ●在右下角功能列,點按Go Live 
    image
     ●於頁面上空白處右鍵,選擇Open with Live Server
    image
     
  3. 但在一開始的時候,右鍵點按Open with Live Server應該是沒有反應的,同時右下角也找不到 Go Live。
    這是因為我們尚未設定工作區(或稱資料夾)。(其實右下角有很貼心的小提示XD)
    請點按左方的「開啟資料夾」,設定為自己放置html檔案的資料夾。應即可正常啟動上述動作。
    image

  4.  

 

 

arrow
arrow
    創作者介紹
    創作者 律晴音 的頭像
    律晴音

    聆風之境

    律晴音 發表在 痞客邦 留言(0) 人氣()