关于pug的笔记

syoya 发布于2019-08-02 11:09 / 2043人阅读

摘要：一简介是一款健壮灵活功能丰富的模板引擎专门为平台开发。注意编写是空格和不能同时使用，否则会发生编译失败的现象。下面给大家展示一些关于的简单的语法百度上面是里的代码下面是里的代码编译后的百度

一、简介

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的简单的语法


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") 百度
        ="
"
        input(
        type="checkbox"
        name="agreement"
        checked
        )

（上面是index.pug里的代码）

（下面是index.html里的代码<编译后的>）




Document


百度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52803.html

关于pug的笔记

摘要：一简介是一款健壮灵活功能丰富的模板引擎专门为平台开发。注意编写是空格和不能同时使用，否则会发生编译失败的现象。下面给大家展示一些关于的简单的语法百度上面是里的代码下面是里的代码编译后的百度一、简介 Pug 是一款健壮、灵活、功能丰富的模板引擎,专门为 Node.js 平台开发。Pug 是由 Jade 改名而来，他可以帮助我们写html的时候更加的简单明了。安装、使用pug的过程打开c...

cgh1999520 2019-08-29 16:17 评论0 收藏0
从零开始的webpack生活-0x010：TemplatingLoader装载模板

摘要：概述上一章讲的时候关于文件相关的，这一章讲的是模板相关的。环境配置栗子加载安装依赖包编写并引入配置低于否则使用打包并查看结果可以看到，被打包成了字符串，并封装成模块导出。更多资源，请查阅的仓库和官网资源源代码 0x001 概述上一章讲的时候关于文件相关的loder，这一章讲的是模板相关的loder。 0x002 环境配置 $ mkdir 0x010-templating-loader...

jk_v1 2019-08-21 17:31 评论0 收藏0
用vue和node写的简易购物车

摘要：配置完成后运行和命令。另一张表存储的是用户和商品。连接数据库初始化查询商品列表和购物车。商品列表和购物车数据是直出，减少页面请求。【新增vue中使用pug模板】在webpack.config.js引入pug的loader，就可以在vue中使用pug模板。 module: { loaders: [ { test:...

QiShare 2019-08-29 12:29 评论0 收藏0
用vue和node写的简易购物车

摘要：配置完成后运行和命令。另一张表存储的是用户和商品。连接数据库初始化查询商品列表和购物车。商品列表和购物车数据是直出，减少页面请求。【新增vue中使用pug模板】在webpack.config.js引入pug的loader，就可以在vue中使用pug模板。 module: { loaders: [ { test:...

Binguner 2019-08-20 16:04 评论0 收藏0
用vue和node写的简易购物车

摘要：配置完成后运行和命令。另一张表存储的是用户和商品。连接数据库初始化查询商品列表和购物车。商品列表和购物车数据是直出，减少页面请求。【新增vue中使用pug模板】在webpack.config.js引入pug的loader，就可以在vue中使用pug模板。 module: { loaders: [ { test:...

Honwhy 2019-08-01 16:43 评论0 收藏0