模板引擎是用来渲染页面的。页面中一部分内容是根据程序生成的，会变化的。

主流的模板引擎有两种：

* jade

破坏式的、强依赖的
用了它就不能用html。

* ejs

非侵入式的、比较温和。
并不破坏原有的html 、 css(其实是往里面加入东西。)

jade

• 根据缩进，规定层级
• 属性放在（）里面，逗号分隔
• 内容空个格，直接往后堆（但是不能换行）

div xxxspan xxxa(href="xxx") 链接

属性

<script src="a.js"></script> script(src="a.js")

内容

<a href="http://www.zhinengshe.com/">官网</a>

a(href="http://www.zhinengshe.com/") 官网

jade文件

htmlheadstylescript(src='a.js')link(rel="stylesheet", href="",type="")script window.onload = function(){var oBtn=document.getElementById('div1');}; //大段的代码可以跟在后面，但是不能换行(会报错的！)bodya(href="http://www/baidu.com/")百度a(href="http://www/qq.com/")腾讯div aaa span bbb    // 可以嵌套子元素//- style 有两种写法：普通属性写法、json写法div(style="width:200px;height:200px;background:red;")       div(style= {width: '200px',height: '200px',background: 'red'})  div(title={width:'200px', height:'200px', background:'red'})  //- class 有两种写法：普通属性写法、arr 写法div(class="aaa lefr-wrap active")div(class=['aaa','left-wrap','active'])div(title=['aaa','left-wrap','active'])//- 简写div.22div#111//-属性的另外一个写法 div(title="111" id="001")div&attributes({title:'aaa',})

TIPs:

style="width:200px;height:200px;background:red;"

1.普通属性写法

2.用json

class="aaa left-swrap active"

1.普通属性写法

2.用arr

js文件：

const jade=require('jade');var str=jade.renderFile('你的jade文件路径', {pretty: true});console.log(str);

jade.render('字符串');

jade.renderFile('模板文件名', 参数)

更多专业前端知识，请上 【猿2048】www.mk2048.com