初步认识pug

1、初步认识pug

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

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.路径设置code

若是并不但愿在当前目录下输入编译后的HTML文件,而是有自定义目录的需求,则须要设置-o参数htm

以下设置,index.html将输入到a目录下面,若是a目录不存在,则会新建a目录:jade

pug index.pug -o a

4.批量编译:编译器

假设编译href下的全部pug文件,则能够这样写:pug href it

5.结构语法:编译

标签基础

【树状】

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

ul

li Item A

li Item B

li Item C       .

持续更新,欢迎你们指教!

相关文章
相关标签/搜索