环境准备：

全局安装jade: npm install jade -g

初始化项目package.json: npm init --yes

安装完成之后，可以使用 jade --help 查看jade的命令行用法

一、在项目目录下新建index.jade文件

inde.jade代码：

1，标签按照html的缩进格式写

2，标签的属性可以采用圆括号

3，如果标签有内容，可以直接写在标签的后面

然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件，-P( 把代码整理成缩进格式的，如果不带这个参数，index.html就是压缩格式，不利于阅读)

编译之后的index.HTML代码：

二、class,id等其他属性与多行文本的书写

新建index2.jade文件,代码如下：

执行编译命令：jade -P ghostwu.html 把index2.jade编译成ghostwu.html文件，编译之后的代码如下：

1，div#Box.Box1.Box2(class='Box3') 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法

2，#abc.Box1.Box2.Box3，全面没有给元素标签名称，默认就是给div标签加上这些属性

3，多行文本的两种写法

p.

1,this is

hello

多行文本第1种写法：p标签后面要跟一个. 里面用原始的html标签写法

p

| 1,this is h3 hello | 2,test | 3,test string

多行文本第2种写法： 文本前面用竖线 ( | )，标签后面跟内容

三、注释

jade模板代码：

编译之后:

1，单行注释

// div.Box.Box2 这是一段div

2，只在jade中注释，不会被编译到html文件

//- div#Box.Box2.Box3

3，块注释( 多行文本注释 )，被注释的内容要另起一行

4，checkBox后面的显示文字部分 要注意，不要挨着属性的后面，要另起一行，写在竖线的后面

四、jade模板实战菜单

编译(jade index.jade -P -w效果: -w: 实时监控文件的修改，保存之后立刻刷新结果，也就是现代前端开发中很流行的热加载技术

五、解释变量

#{}： 可以解释变量,toUpperCase():变量转大写

把json文件的数据在编译的时候传递到模板,

新建data.json文件数据

编译命令：jade index2.jade -P -O data.json -O 指定一个json文件，把json文件的数据传递到模板

编译后的结果：

以上这篇基于Node.js模板引擎教程-jade速学与实战1就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。