一、简介

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. 基于python实现自动化办公学习笔记三

    Excel(1)写xls文件 # 有序字典from collections import OrderedDict# 存储数据from pyexcel_xls import save_data def ...

  2. org.xml.sax.SAXParseException: 元素类型 "input" 必须由匹配的结束标记 "</input>" 终止。

    错误记录 Spring Boot推荐使用thymeleaf作为视图,按照SpringBoot实战一书的案例写Demo. 发生错误: org.xml.sax.SAXParseException: 元素类 ...

  3. 高通camera基本代码架构【转】

    本文转载自:http://blog.sina.com.cn/s/blog_c0de2be70102vyn1.html 1  camera基本代码架构 高通平台对于camera的代码组织,大体上还是遵循 ...

  4. 背包&数位dp(8.7)

    背包 0/1背包 设dp[i][j]为前i个物品选了j体积的物品的最大价值/方案数 dp[i][j]=max(dp[i-1][j-w[i]]+v[i],dp[i-1][j])(最大价值) dp[i][ ...

  5. 架构-层-Model：Model

    ylbtech-架构-层-Model:Model 1.返回顶部 1. Model,意思是模特儿,模特儿是英文“model”的音译.模特一般来说要五官端正,身材良好,有气质,展示能力强,另外身高要具备一 ...

  6. DRF的路由生成类的使用

    DRF路由生成类的使用 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework ...

  7. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_02 递归_3_练习_使用递归计算阶乘

    结束条件是乘到 当前数字等于1

  8. 字符串中的TRIM操作

    std::string& ltrim(std::string& str, const std::string& chars = "\t\n\v\f\r ") ...

  9. 【GTS】关于GtsTetheringTestCases模块的几个失败项

    GTS---关于GtsTetheringTestCases模块的几个失败项 1.run gts -m GtsTetheringTestCases -t com.google.android.tethe ...

  10. ssm项目的创建思路

    ·DAO层: 代码:pojo.映射文件.接口文件——Mybatis逆向工程自动生成 配置:ApplicationContext-dao.xml——数据源.连接池.会话工厂.mapper包扫描 ·Ser ...