一、简介

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的笔记的更多相关文章

  1. jade(pug)学习笔记（待填充.......）

    深刻认识到总结知识点的重要性,不然遇到似曾相识的问题,要翻老半天的百度才能解决.20171018 pug——文字内部嵌入结构 比如: <a class = "href"> ...

  2. pug(jade) 学习笔记

    from: https://www.cnblogs.com/xiaohuochai/p/7222227.html 对于一些嵌套层次较深的页面,在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的 ...

  3. TJI读书笔记15-持有对象

    TJI读书笔记15-持有对象 总览 类型安全和泛型 Collection接口 添加元素 List 迭代器 LinkedList 栈 Set Map Queue Collection和Iterator ...

  4. mysql颠覆实战笔记(一)--设计一个项目需求，灌入一万数据先

    版权声明:笔记整理者亡命小卒热爱自由,崇尚分享.但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的<web级mysql颠覆实战课程 >.如需转载请尊重老师劳动,保留沈逸 ...

  5. koa2学习笔记01 - 创建项目 —— koa生成器一键生成koa项目

    前言 从17年开始尝试学习搭建个人网站开始,就开始学习摸索node了,至今差不多快两年了. 说起来现在都9102年了,所以最近打算整体设计重构一下网站,索性node后台也重写一遍. 重温一下node, ...

  6. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  7. 超硬核 Web 前端学霸笔记，学完就去找工作！

    文章和教程 Vue 学习笔记 Node 学习笔记 React 学习笔记 Angular 学习笔记 RequireJS 学习笔记 Webpack 学习笔记 Gulp 学习笔记 Python 学习笔记 E ...

  8. git-简单流程（学习笔记）

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  9. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. WAMPSERVER php

    The Apache service named reported the following error:>>> (OS 10013)An attempt was made to ...

  2. npm构建vue项目

    环境搭建 我们需要先从node.js官网安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装). 安装完成之后,打开命令行工具(Mac打开终端),输入 node -v,如图,如果出现相应的 ...

  3. 使用MarkDown的编辑器

    今天找到了一个比较全的markdown格式说明http://www.appinn.com/markdown/#precode,特别是代码标注的时候 多行的时候 使用 ... ... .. .. 可以把 ...

  4. js 正则整理

    //严格验证身份证格式方法function idCardNo(value){ //验证身份证号方法 var area = { 11: "北京", 12: "天津" ...

  5. 排序算法六：计数排序（Counting sort）

    前面介绍的几种排序算法,都是基于不同位置的元素比较,算法平均时间复杂度理论最好值是θ(nlgn). 今天介绍一种新的排序算法,计数排序(Counting sort),计数排序是一个非基于比较的线性时间 ...

  6. c编程过程中错误笔记-& 理解不深啊！

    写了一个函数,删除数组里面的元素,声明如: int student_delete(int *len, struct student stu[]): 在其内部调用了另一个函数 int student_d ...

  7. MSF——客户端渗透之VBScript感染

    弱点扫描 根据信息收集的结果搜索漏洞利用模块 结合外部漏洞扫描系统对大IP地址段进行批量扫描 误报率.漏报率 VNC密码破解 客户端渗透 VBScript感染方式 利用  宏  感染word.exce ...

  8. Java相关面试题总结+答案（八）

    [RabbitMQ] 135. RabbitMQ 的使用场景有哪些? 抢购活动,削峰填谷,防止系统崩塌. 延迟信息处理,比如 10 分钟之后给下单未付款的用户发送邮件提醒. 解耦系统,对于新增的功能可 ...

  9. 多线程10-SemaphoreSlim

        );         ;i<=;i++)             {                  +  * i;                 ));             C ...

  10. CodeForces.1174D.EhabandtheExpectedXORProblem(构造前缀异或和数组)

    题目链接 这道题比赛的时候没做出来,赛后补题的时候发现其实可以构造一个前缀异或和数组,然后根据初始化的第一个值进行填数,但是作为菜鸡的我虽然坚信自己的想法是正确的却想了很久也没有能够构造出来所谓的前缀 ...