关于pug的笔记

一、简介

Pug 是一款健壮、灵活、功能丰富的模板引擎,专门为 Node.js 平台开发。Pug 是由 Jade 改名而来，他可以帮助我们写html的时候更加的简单明了。
安装、使用pug的过程
打开cmd
直接输入npm install pug-cli -gd
最后显示出如图的样子就安装成功了：

创建一个文件夹在文件夹中创造一个index.pug和name.bat的文件,然后在用记事本打开文件name.bat然后输入pug pug -P("P"为大写) -o a -w,双击name.bat就会自动创建一个a文件，在a文件中还会自动生成index.html即可在index.pug中编写index.html,简单明了。

注意编写index.pug是空格和tab不能同时使用，否则会发生编译失败的现象。

下面给大家展示一些关于pug的简单的语法

<!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里的代码）

（下面是index.html里的代码<编译后的>）
<!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</title>

<link rel="stylesheet" href="../css/index1.css"/>

</head>
<body>

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

巴特西

关于pug的笔记

一、简介

最新文章

热门文章