pug--HTML模板引擎安装编译

- 日理万妓 2022-07-14 06:21 190阅读 0赞

刚开始学pug的时候有点不明白，然后各种搜索，后来才知道pug就是jade，原名叫jade，现在更名为pug而已。可能刚改名没有多久吧，搜pug资料很少。我也刚开始学习，希望对大家会有帮助。

1、首先要通过node.js的npm来安装pug，直接在cmd里面输入npm  install  -g pug  前提是你安装了node和npm (网上安装教程很多，这里就不赘述了)，还需要安装cli   npm install -g pug-cli ，不然会出现pug not found。   -g表示全局安装

2、写一个test.pug文件，在cmd里进入test.pug的目录下，输入pug  test.pug   回车即可出现rendered test.html。输入pug -P -w test.pug比较好，因为输出的html格式会好看，并且是被监听的，修改test.pug的时候，只要保存，html会及时更新。

![Center][]

test.pug简单代码如下：

doctype html
    
    head
    	meta(charset='utf-8')
    	title First file of pug
    body
    	h1 This is my first pug
    	div
    		.div1 
    		p that some content in here
    			i point

编译成html之后代码如下：

<!DOCTYPE html>
    <head>
      <meta charset="utf-8">
      <title>First file of pug</title>
    </head>
    <body>
      <h1>This is my first pug</h1>
      <div>
        <div class="div1"> </div>
        <p>that some content in here<i>point</i></p>
      </div>
    </body>

[Center]: /images/20220714/eb4f100c84a7409c9e019aea3dd1252f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot——模板引擎的介绍、thymeleaf模板引擎

目录一、模板引擎二、Thymeleaf的导入三、Thymeleaf分析四、使用Thymeleaf简单测试五、Thymeleaf 语

水深无声/ 2023年07月24日 14:47/ 0 赞/ 68 阅读

相关模板引擎

模板引擎模板引擎一、模板引擎分类置换型模板引擎解释型模板引擎编译型模板引擎

阳光穿透心脏的1/2处/ 2023年03月02日 10:59/ 0 赞/ 11 阅读

相关 artTemplate模板引擎

经常被用到，你还用过哪些模板引擎，个人认为：对于模板引擎，挑一个性能稍高的，使用简单的，容易调试的就可以，一个足以，没有必要使用那么多。作为前端人员，较推崇artTemplat

古城微笑少年丶/ 2022年09月27日 12:27/ 0 赞/ 278 阅读

相关 mustache模板引擎

Logic-less templates. github：[http://mustache.github.com/ ][http_mustache.github.com]

谁借莪１个温暖的怀抱￠/ 2022年07月31日 19:28/ 0 赞/ 297 阅读

相关 pug--HTML模板引擎安装编译

刚开始学pug的时候有点不明白，然后各种搜索，后来才知道pug就是jade，原名叫jade，现在更名为pug而已。可能刚改名没有多久吧，搜pug资料很少。我也刚开始学习，希望对

- 日理万妓/ 2022年07月14日 06:21/ 0 赞/ 191 阅读

相关 JavaScript模板引擎

时间：2017年4月24日22:52:12 [《我的博客地图》][Link 1] 作为一名前端开发人员，如果立志长期发展下去，那么深入研究的路必须走好。尤其是对Ja

深碍√TFBOYSˉ_/ 2022年06月17日 11:19/ 0 赞/ 275 阅读

相关 freemarker模板引擎

一。 freemarker简介在互联网软件内容网站中一般首页的访问量大，为了提供首页的访问效率，一般首页的内容以及其中的新闻等信息都可以实现html静态化浏览

￡神魔★判官ぃ/ 2022年06月06日 01:27/ 0 赞/ 386 阅读

相关 freemarker 模板引擎

freemarker是基于java的模板引擎一般是Template模板 + 数据源 = html页面 <dependency>

左手的ㄟ右手/ 2022年04月25日 06:00/ 0 赞/ 360 阅读

相关模板引擎EJS

1.安装 npm install ejs 2.使用 var ejs = require("ejs"); var str = "I

我不是女神ヾ/ 2022年03月17日 08:08/ 0 赞/ 280 阅读

相关 Nvelocity模板引擎

[https://www.cnblogs.com/PBDragon/p/3810312.html][https_www.cnblogs.com_PBDragon_p_38103

迈不过友情╰/ 2021年11月16日 11:16/ 0 赞/ 450 阅读