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

刚开始学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会及时更新。

test.pug简单代码如下：

doctype htmlheadmeta(charset='utf-8')title First file of pug
bodyh1 This is my first pugdiv.div1 p that some content in herei 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>

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

pug模板引擎(原jade)
前面的话为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...
Node.js(二)——pug模板引擎，nunjucks模板引擎，在koa中使用pug和nunjucks模板引擎
目录 1.知识点及课堂目标 2.模板引擎 3.pug模板引擎使用 3.1安装pug 3.2pug常用语法 3.2.1通过缩进关系,代替以往html的层级包含关系. 3.2.2html 元素属性/sty ...
php smarty 模版引擎,php模板引擎Smarty入门 - 小俊学习网
如果要实现前端模板和后台逻辑业务处理相分离,MVC的思想开发网站的话,可使用模板引擎来完成.来学习php模板引擎Smarty,它分开了逻辑程序和外在的内容,提供了一种易于管理的方法. 1. 什么是模板 ...
PHP MVC及模板引擎
连接到此文模板引擎,这四个字听起来很高深的样子,一般用到"引擎"两字都会感觉比较高级,类似游戏3D引擎.Zend引擎等,其实都是唬人的,骗外行人的.所以在我初学PHP的那会,也因 ...
深入浅出之Smarty模板引擎工作机制(二)
源代码下载地址:深入浅出之Smarty模板引擎工作机制接下来根据以下的Smarty模板引擎原理流程图开发一个自己的模板引擎用于学习,以便加深理解. Smarty模板引擎的原理,其实是这么一个过程: ...
Smarty模板引擎工作机制(二)
源代码下载地址:深入浅出之Smarty模板引擎工作机制接下来根据以下的Smarty模板引擎原理流程图开发一个自己的模板引擎用于学习,以便加深理解. Smarty模板引擎的原理,其实是这么一个过程: ...
前端模板引擎 —— 带你学习Jade / Pug 模板引擎
模板引擎是什么模板引擎是将静态部分糅合的一种实现机制或者技术. 目前使用较广的模板引擎有以下几种:Jade / Pug.EJS.Handlebars. 本文详述Jade / Pug模板引擎在项目开发 ...
Jade/Pug模板引擎
1.概述: Jade是一款基于haml的HTML的模板引擎,采用JavaScript实现,可以方便的在Node.js.Yeoman等框架中使用,已改名为pug. 2.全局安装: npm install ...
pug模板语法在vue中的使用--HTML的模板引擎
一. 介绍 pug,原名jade,是流行的HTML模板引擎,,最大的特色是使用缩进排列替代成对标签.它简化了HTML的成对标签的写法,使代码更加简洁.开发效率更高,但是同时它也带来了一些副作用:可移植 ...

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

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

最新文章

热门文章