html 转 pug 在线,pug - HTML模板引擎安装器

一、我们知道，pug原名jade，能很大情况下增加代码的复用，从而减少项目的开发时间。现在简聊下pug的用法

二、pug安装(终端)

1、下载安装包，按照步骤傻瓜式安装下载地址链接 https://nodejs.org/en/

2、在终端检查是否安装成功

node -v

npm -v

3、在 npm 中安装pug

sudo npm install pug-cli -g (sudo:代表以管理员身份进行安装，后续步骤需输入开机密码)

4、查询pug所有基本菜单命令

pug --help

5、找到对应要将 .pug转换成 .html 格式的 pug文件位置

6、对 .pug 文件进行转换

pug -P index.pug (-P：保持原有格式输出)

6、监控pug 文件，自动生成 .html 文件

pug -P -w index.pug(-w：自动编译)

7、将pug放入相应文件夹a

pug *.pug -o a(*.pug 相应的所有.pug 文件如果没有a文件夹会自动生成)

三、pug文件复用代码( 代码实现。 .pug 都可省略)

1、include aa.pug

代码完全复用，不可对内容进行修改，之间用空格隔开

2、extends 可对内部定义的某块区域进行修改

① extends index.pug (完全复用)

② extends index.pug

block source (对index.pug内容中 source 区域进行修改)

四、pug语法

Script的写法：

(引入时， . 不可省；后的Script写法变)

一般写项目时，都有个公众的 .html

html 转 pug 在线,pug - HTML模板引擎安装器相关推荐

五合一收款码在线生成多模板免安装网站源码
介绍: 五合一收款码在线生成网站源码]PayPal五合一收款+HTML单页版多模板免安装五合一收款码在线生成,40个模板支持微信支付.支付宝支付.手机QQ支付.京东钱包.百度钱包,PayPal五合 ...
pug--HTML模板引擎安装编译
刚开始学pug的时候有点不明白,然后各种搜索,后来才知道pug就是jade,原名叫jade,现在更名为pug而已.可能刚改名没有多久吧,搜pug资料很少.我也刚开始学习,希望对大家会有帮助. 1.首先 ...
pug模板引擎(原jade)
前面的话为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...
写一个迷你版Smarty模板引擎，对认识模板引擎原理非常好（附代码）
前些时间在看创智博客韩顺平的Smarty模板引擎教程,再结合自己跟李炎恢第二季开发中CMS系统写的tpl模板引擎.今天就写一个迷你版的Smarty引擎,虽然说我并没有深入分析过Smarty的源码,但是 ...
pug模板引擎——jade
随着前端项目工程化的发展,代码结构越来越复杂,代码却越来越简单,为了将更多的精力集中在业务功能上面,对页面的快速构建需求日益剧增,同js.css一样,html也出现了各种各样的工具,即模板引擎,本文不 ...
Jade/Pug模板引擎
1.概述: Jade是一款基于haml的HTML的模板引擎,采用JavaScript实现,可以方便的在Node.js.Yeoman等框架中使用,已改名为pug. 2.全局安装: npm install ...
前端模板引擎 —— 带你学习Jade / Pug 模板引擎
模板引擎是什么模板引擎是将静态部分糅合的一种实现机制或者技术. 目前使用较广的模板引擎有以下几种:Jade / Pug.EJS.Handlebars. 本文详述Jade / Pug模板引擎在项目开发 ...
pug模板语法在vue中的使用--HTML的模板引擎
一. 介绍 pug,原名jade,是流行的HTML模板引擎,,最大的特色是使用缩进排列替代成对标签.它简化了HTML的成对标签的写法,使代码更加简洁.开发效率更高,但是同时它也带来了一些副作用:可移植 ...
koa + pug模板引擎
模板引擎模板引擎:模板引擎是web应用中动态生成html的工具,负责将数据和模板结合. 常见模板引擎有:ejs.jade(现更名为pug).Handlebars.Nunjucks.Swig等: 使用 ...
pug模板引擎基本用法
一.pug模板引擎基本用法 Pug是jade的新版,jade由于商标已被注册,所以更名为pug. 缩进标注:Pug模板和大多数模板不同,它有自己的语法特点,采用缩进的方式进行标注,使用这种方式,使得代 ...

html 转 pug 在线,pug - HTML模板引擎安装器

html 转 pug 在线,pug - HTML模板引擎安装器相关推荐

最新文章

热门文章