初步認識pug

anRui 發布于2019-08-29 16:17 / 2454人閱讀

摘要：一初步認識所謂的就是我們之前說的也就是一種通過縮進的方式來編寫代碼的過程，在編譯的過程中，我們不需要考慮標簽是否閉合的問題。使用縮進來表示標簽間的嵌套關系，這樣可以構建一個代碼的樹狀結構持續更新，歡迎大家指教

一、初步認識pug

1.所謂的pug就是我們之前說的jade,也就是一種通過縮進的方式來編寫代碼的過程，在編譯的過程中，我們不需要考慮標簽是否閉合的問題。此外，用這種編譯方式，加快了我們寫代碼的速度，也為代碼復用提供了便捷。

2.在學習pug基礎語法之前，首先要了解pug的命令行的使用,例如：

doctype html

    html

    head

            title aaa

    body

在文件里面寫上述程序，然后以xxx.pug的格式保存，再再終端命令輸入 pug xxx.pug,按下回車鍵，我們在回到之前的項目編譯器，就會發現在編譯器內出現了與xxx同名的xxx.html文件，點開之后會發現html 基礎格式已經打印出來了。但是這里有一個問題，基礎格式的排版并不像我們平時書寫的格式，這里就需要我們在將pug格式轉化為HTML的時候輸入命令 pug -P xxx.pug;就可以得到我們想要的格式了。為了實時自動更新出現我們修改后的代碼樣式，我們還可以這樣輸入終端命令：pug -P -w xxx.pug;不想繼續更新，快捷鍵為：ctrl+c.

3.路徑設置

如果并不希望在當前目錄下輸入編譯后的HTML文件，而是有自定義目錄的需求，則需要設置-o參數

如下設置，index.html將輸入到a目錄下面，如果a目錄不存在，則會新建a目錄：

pug index.pug -o a

4.批量編譯：

假設編譯href下的所有pug文件，則可以這樣寫：pug href

5.結構語法：

標簽

【樹狀】

在默認情況下，在每行文本的開頭（或者緊跟白字符的部分）書寫這個 HTML 標簽的名稱。使用縮進來表示標簽間的嵌套關系，這樣可以構建一個 HTML 代碼的樹狀結構

ul

li Item A

li Item B

li Item C       .

持續更新，歡迎大家指教！

GPU云服務器云服務器 pug html(pug) 人工智能初步 hadoop初步學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113644.html

初步認識pug

摘要：一初步認識所謂的就是我們之前說的也就是一種通過縮進的方式來編寫代碼的過程，在編譯的過程中，我們不需要考慮標簽是否閉合的問題。使用縮進來表示標簽間的嵌套關系，這樣可以構建一個代碼的樹狀結構持續更新，歡迎大家指教一、初步認識pug 1.所謂的pug就是我們之前說的jade,也就是一種通過縮進的方式來編寫代碼的過程，在編譯的過程中，我們不需要考慮標簽是否閉合的問題。此外，用這種編譯方式，加...

supernavy 2019-08-02 11:09 評論0 收藏0
vue+webpack+scss+jade(pug)的環境搭建

摘要：標簽聲明轉載須經本人同意這篇博客就聊一聊如何用搭建的環境，以及拓展了下如何在搭建好的環境中使用以及，廢話不多說，直接進入主題。第三步補充，依賴擴展現在，我們搭建的環境并不支持，語法，我們需要再加工一下配置。標簽：vue,webpack,jade,scss聲明：轉載須經本人同意這篇博客就聊一聊如何用webpack搭建vue2.0的環境，以及拓展了下如何在搭建好的環境中使用scss以及p...

GraphQuery 2019-08-01 15:59 評論0 收藏0
JavaScript面向對象初步認識

摘要：一面向對象初步認識什么是對象一句話解釋萬物皆對象對象是有屬性的用來寫入對象的應用接口接口簡單的說就是后臺提供給前端提供數據的，讓我們進行渲染請求接口的時候我們會用到一個函數小例子代碼如下背心吊帶無袖打底衫內搭一、面向對象初步認識 1.什么是對象？一句話解釋：萬物皆對象對象是有屬性的：用{ }來寫入！ 2.對象的應用（接口） jsonshowImg(https://segment...

selfimpr 2019-08-29 16:35 評論0 收藏0
JavaScript面向對象初步認識

摘要：一面向對象初步認識什么是對象一句話解釋萬物皆對象對象是有屬性的用來寫入對象的應用接口接口簡單的說就是后臺提供給前端提供數據的，讓我們進行渲染請求接口的時候我們會用到一個函數小例子代碼如下背心吊帶無袖打底衫內搭一、面向對象初步認識 1.什么是對象？一句話解釋：萬物皆對象對象是有屬性的：用{ }來寫入！ 2.對象的應用（接口） jsonshowImg(https://segment...

kbyyd24 2019-08-23 11:35 評論0 收藏0
JavaScript面向對象初步認識

摘要：一面向對象初步認識什么是對象一句話解釋萬物皆對象對象是有屬性的用來寫入對象的應用接口接口簡單的說就是后臺提供給前端提供數據的，讓我們進行渲染請求接口的時候我們會用到一個函數小例子代碼如下背心吊帶無袖打底衫內搭一、面向對象初步認識 1.什么是對象？一句話解釋：萬物皆對象對象是有屬性的：用{ }來寫入！ 2.對象的應用（接口） jsonshowImg(https://segment...

jonh_felix 2019-08-02 11:22 評論0 收藏0