初步认识pug

anRui 发布于2019-08-29 16:17 / 2422人阅读

摘要：一初步认识所谓的就是我们之前说的也就是一种通过缩进的方式来编写代码的过程，在编译的过程中，我们不需要考虑标签是否闭合的问题。使用缩进来表示标签间的嵌套关系，这样可以构建一个代码的树状结构持续更新，欢迎大家指教

一、初步认识pug

1.所谓的pug就是我们之前说的jade,也就是一种通过缩进的方式来编写代码的过程，在编译的过程中，我们不需要考虑标签是否闭合的问题。此外，用这种编译方式，加快了我们写代码的速度，也为代码复用提供了便捷。

2.在学习pug基础语法之前，首先要了解pug的命令行的使用,例如：

doctype html

    html

    head

            title aaa

    body

在文件里面写上述程序，然后以xxx.pug的格式保存，再再终端命令输入 pug xxx.pug,按下回车键，我们在回到之前的项目编译器，就会发现在编译器内出现了与xxx同名的xxx.html文件，点开之后会发现html 基础格式已经打印出来了。但是这里有一个问题，基础格式的排版并不像我们平时书写的格式，这里就需要我们在将pug格式转化为HTML的时候输入命令 pug -P xxx.pug;就可以得到我们想要的格式了。为了实时自动更新出现我们修改后的代码样式，我们还可以这样输入终端命令：pug -P -w xxx.pug;不想继续更新，快捷键为：ctrl+c.

3.路径设置

如果并不希望在当前目录下输入编译后的HTML文件，而是有自定义目录的需求，则需要设置-o参数

如下设置，index.html将输入到a目录下面，如果a目录不存在，则会新建a目录：

pug index.pug -o a

4.批量编译：

假设编译href下的所有pug文件，则可以这样写：pug href

5.结构语法：

标签

【树状】

在默认情况下，在每行文本的开头（或者紧跟白字符的部分）书写这个 HTML 标签的名称。使用缩进来表示标签间的嵌套关系，这样可以构建一个 HTML 代码的树状结构

ul

li Item A

li Item B

li Item C       .

持续更新，欢迎大家指教！

GPU云服务器云服务器 pug html(pug) 人工智能初步 hadoop初步学习

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

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

初步认识pug

摘要：一初步认识所谓的就是我们之前说的也就是一种通过缩进的方式来编写代码的过程，在编译的过程中，我们不需要考虑标签是否闭合的问题。使用缩进来表示标签间的嵌套关系，这样可以构建一个代码的树状结构持续更新，欢迎大家指教一、初步认识pug 1.所谓的pug就是我们之前说的jade,也就是一种通过缩进的方式来编写代码的过程，在编译的过程中，我们不需要考虑标签是否闭合的问题。此外，用这种编译方式，加...

supernavy 2019-08-02 11:09 评论0 收藏0
vue+webpack+scss+jade(pug)的环境搭建

摘要：标签声明转载须经本人同意这篇博客就聊一聊如何用搭建的环境，以及拓展了下如何在搭建好的环境中使用以及，废话不多说，直接进入主题。第三步补充，依赖扩展现在，我们搭建的环境并不支持，语法，我们需要再加工一下配置。标签：vue,webpack,jade,scss声明：转载须经本人同意这篇博客就聊一聊如何用webpack搭建vue2.0的环境，以及拓展了下如何在搭建好的环境中使用scss以及p...

GraphQuery 2019-08-01 15:59 评论0 收藏0
JavaScript面向对象初步认识

摘要：一面向对象初步认识什么是对象一句话解释万物皆对象对象是有属性的用来写入对象的应用接口接口简单的说就是后台提供给前端提供数据的，让我们进行渲染请求接口的时候我们会用到一个函数小例子代码如下背心吊带无袖打底衫内搭一、面向对象初步认识 1.什么是对象？一句话解释：万物皆对象对象是有属性的：用{ }来写入！ 2.对象的应用（接口） jsonshowImg(https://segment...

selfimpr 2019-08-29 16:35 评论0 收藏0
JavaScript面向对象初步认识

摘要：一面向对象初步认识什么是对象一句话解释万物皆对象对象是有属性的用来写入对象的应用接口接口简单的说就是后台提供给前端提供数据的，让我们进行渲染请求接口的时候我们会用到一个函数小例子代码如下背心吊带无袖打底衫内搭一、面向对象初步认识 1.什么是对象？一句话解释：万物皆对象对象是有属性的：用{ }来写入！ 2.对象的应用（接口） jsonshowImg(https://segment...

kbyyd24 2019-08-23 11:35 评论0 收藏0
JavaScript面向对象初步认识

摘要：一面向对象初步认识什么是对象一句话解释万物皆对象对象是有属性的用来写入对象的应用接口接口简单的说就是后台提供给前端提供数据的，让我们进行渲染请求接口的时候我们会用到一个函数小例子代码如下背心吊带无袖打底衫内搭一、面向对象初步认识 1.什么是对象？一句话解释：万物皆对象对象是有属性的：用{ }来写入！ 2.对象的应用（接口） jsonshowImg(https://segment...

jonh_felix 2019-08-02 11:22 评论0 收藏0