初步認識pug

supernavy 發(fā)布于2019-08-02 11:09 / 1328人閱讀

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

一、初步認識pug

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

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

doctype html

    html

    head

            title aaa

    body

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

3.路徑設置

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

如下設置，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       .

持續(xù)更新，歡迎大家指教！

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52798.html

初步認識pug

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

anRui 2019-08-29 16:17 評論0 收藏0
vue+webpack+scss+jade(pug)的環(huán)境搭建

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

GraphQuery 2019-08-01 15:59 評論0 收藏0
JavaScript面向?qū)ο?em>初步認識

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

selfimpr 2019-08-29 16:35 評論0 收藏0
JavaScript面向?qū)ο?em>初步認識

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

kbyyd24 2019-08-23 11:35 評論0 收藏0
JavaScript面向?qū)ο?em>初步認識

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

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