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

pug - HTML模板引擎安装器_第1张图片

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语法

pug - HTML模板引擎安装器_第2张图片
pug - HTML模板引擎安装器_第3张图片

Script的写法:

(引入时, . 不可省;后的Script写法变)

pug - HTML模板引擎安装器_第4张图片

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

pug - HTML模板引擎安装器_第5张图片

你可能感兴趣的:(pug - HTML模板引擎安装器)