一、简介

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. 解决RHEL6 vncserver 启动 could not open default font 'fixed'错误.

    https://blog.csdn.net/silencegll/article/details/51320629

  2. hive_action

    w pdf469 [不直接MR访问数据的工具   查询间接转化为MR] https://en.wikipedia.org/wiki/Apache_Hive Apache Hive supports a ...

  3. thinkphp5.0学习笔记（二）API后台处理与命名空间

    命名空间 先来看命名空间吧: 命名空间是学习TP的基础, <?php namespace app\lian\c1; class yi{ public $obj = "这是第一个空间里面 ...

  4. Oracle数据备份与恢复

    为了保证数据库的高可用性,Oracle数据库提供了备份和恢复机制,以便在数据库发生故障时完成对数据库的恢复操作,避免损失重要的数据资源 丢失数据分为:物理丢失:操作系统的数据库主键(数据文件.控机文件 ...

  5. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_09 序列化流_4_transient关键字_瞬态关键字

    不想被序列化的成员变量用 transient修饰 age加上static关键字 反序列化age就读取不到正确的值了

  6. c# Thread——1.为什么Abort中断线程是不可靠的

    Thread.Abort 方法在c#中用作强制中断线程的执行,大多用于线程内部满足某个特定条件而自己调用关闭自身,比如下面的代码在i自增到3的时候就会停止打印. class Program { sta ...

  7. Android加载网络图片报android.os.NetworkOnMainThreadException异常

    Android加载网络图片大致可以分为两种,低版本的和高版本的.低版本比如4.0一下或者更低版本的API直接利用Http就能实现了: 1.main.xml <?xml version=" ...

  8. python-backports.ssl-match-hostname 安装问题

    转载请标明本文链接:(https://www.cnblogs.com/softwarecb/p/python-backports-ssl.html) 系统版本Ubuntu14.04 因为要用Conta ...

  9. Node.js实战8：可用于压缩、加密的zlib。

    zlib是nodejs内置的模块,有deflate.inflate函数,使用的是gzip算法,可用于压缩和解压,也可用于数据加密.解密. 如下示例: var zlib = require(" ...

  10. vs2015上编译QT程序的环境搭建

    下载相对应版本的QT(以QT5.7.0为例),进入网站http://download.qt.io/archive/qt/5.7/5.7.0/,下载MSVC版本QT,我的系统是64位,VS版本是2015 ...