欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

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

发布时间:2023/12/18 HTML 44 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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模板引擎安装器的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。