一、简介

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. ORACLE DG 库参数db_file_name_convert和log_file_name_convert的作用

    https://www.cnblogs.com/xqzt/p/5089826.html ORACLE DG 库参数db_file_name_convert和log_file_name_convert的 ...

  2. Ehrenfeucht–Fraïssé game back-and-forth games

    w https://en.wikipedia.org/wiki/Ehrenfeucht–Fraïssé game

  3. VMware vMotion 配置要求

    目录 目录 vCenter 支持 vMotion 的前提 条件 vMotion 的主机配置 vMotion 共享存储器要求 vMotion 网络要求 最后 vCenter 支持 vMotion 的前提 ...

  4. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第4节 ArrayList集合_19-ArrayList练习四_筛选集合

    大集合里面循环装了20个int类型的随即数字 下面要自定义方法,这个方法专门负责筛选 遍历偶数的集合 重点是集合当做方法的参数,还能当做集合的返回值

  5. Docker安装及部署实例.Net Core

    1.什么是Docker Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱 ...

  6. seaborn

    Seaborn是基于matplotlib的Python数据可视化库. 它提供了一个高级界面,用于绘制引人入胜且内容丰富的统计图形. 一  风格及调色盘 风格 1 sns.set()  模式格式 2 s ...

  7. sudo: pip:找不到命令

    https://blog.csdn.net/fcku_88/article/details/84191288

  8. source ~/.bash_profile是什么意思

    ~ 这个符号表示你的家目录,.bash_profile 是一个隐藏文件,主要是用来配置bash shell的,source -/.bash_profile 就是让这个配置文件在修改后立即生效.

  9. linux自动化运维工具Ansible saltstack Puppet、Chef、Fabric之间的对比

    发现分布式是一个发展的趋势,无论是大型网站的负载均衡架构还是大数据框架部署,以及云存储计算系统搭建都离不开多台服务器的连续部署和环境搭建. 当我们的基础架构是分散式或者基于云的,并且我们经常需要处理在 ...

  10. Airbnb开源 快速搭建企业级BI数据平台

    最近在公司做一个数据可视化相关的项目,使用了Airbnb开源维护的企业级BI数据平台superset,相较于tableau这种收费的商业软件,Superset是开源维护的,同时图表的种类和颜值普遍偏高 ...