關於pug的筆記

時間 2020-01-24

標籤關於 pug 筆記简体版

原文原文鏈接

1、簡介

Pug 是一款健壯、靈活、功能豐富的模板引擎,專門爲 Node.js 平臺開發。Pug 是由 Jade 更名而來，他能夠幫助咱們寫html的時候更加的簡單明瞭。
安裝、使用pug的過程
打開cmd
直接輸入npm install pug-cli -gd
最後顯示出如圖的樣子就安裝成功了：
css

建立一個文件夾在文件夾中創造一個index.pug和name.bat的文件,而後在用記事本打開文件name.bat而後輸入pug pug -P("P"爲大寫) -o a -w,雙擊name.bat就會自動建立一個a文件，在a文件中還會自動生成index.html便可在index.pug中編寫index.html,簡單明瞭。html

注意編寫index.pug是空格和tab不能同時使用，不然會發生編譯失敗的現象。npm

下面給你們展現一些關於pug的簡單的語法ui

<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        title Document
        link(rel="stylesheet", href="../css/index1.css")
    body
        div(class="div1")
        div(class="div2")

        a(class="button" href="http://www.baidu.com") 百度
        ='\n'
        input(
        type='checkbox'
        name='agreement'
        checked
        )

（上面是index.pug裏的代碼）spa

（下面是index.html裏的代碼<編譯後的>）
<!DOCTYPE html>
<html lang="en">
<head>code

<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<link rel="stylesheet" href="../css/index1.css"/>

</head>
<body>htm

<div class="div1"></div>
<div class="div2"></div><a class="button" href="http://www.baidu.com">百度</a>

<input type="checkbox" name="agreement" checked="checked"/>

</body>
</html>blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。