1.安裝jade：npm install jade -g
運行jade：jade index.jade
如果要實時觀察變化，可以運行：jade -P -w index.jade
用編譯軟件分屏（例：sublime）觀察
2.學習jade
中午看了一下文檔，學習了一下，直接代碼列出來：
index.jade
<!-- 緩衝區註釋 -->
doctype html
html(lang="zh-CN")
head
title
body
div.demo1
//非緩衝區註釋
div
//注意空格
a(href="http://www.baidu.com",target="_blank") 百度
//“=”設置元素包含的內容。“=”後可跟任何“表達式”，可以是一個字符串、一個“變量”，也可以是“函數”或“表達式”的運算結果。“=”後的內容會被轉碼
div='包含內容'+',<b>表達式</b>'
//不希望進行轉碼
div!='包含內用，<b>表達式</b>'
//布爾屬性
button(disabled=true) 屬性進行添加
button(disabled=false) 屬性不進行添加
//style寫法
div(style={color:red,padding:'10px 10px'}) 文本內容
div.img
//標籤自閉和屬性（img，input等）
img(src="/images/img1.jpg")
//jade的特殊字符“|”將後邊的內容原樣輸出
//注意：“|”作用域只有一行，多行用到“.”
div.demo2
a(href="http://www.baidu.com") 百度
| 這是百度的網址
div.
插入的jade語句是：#[b 這個]
//嵌入JavaScript代碼（提高便利性，靈活性）
//“-”開頭
-for(var i=0;i<=2;i++)
p 這是一個p
//遍歷語法
-var arry=['one','two','three']
each item,index in arry
div=index+':'+item
//while語法
- var n=0;
while n<=3
div= n++
//if
-var a=false,b=true
if a
div 1
else
div 你猜
//case
-var gen=0
case gen
when 0
div 是0
default
div 不是0
//填充數據
-var name='zx'
div my name is #{name} <!--轉碼 -->
div my name is !{name}<!--不轉碼 -->
//繼承（關鍵字block替換的塊）
編譯以後：
<!-- 緩衝區註釋 --><!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
</head>
<body>
<div class="demo1"></div>
<!--非緩衝區註釋-->
<div>
<!--注意空格--><a href="http://www.baidu.com" target="_blank">百度</a>
</div>
<!--“=”設置元素包含的內容。“=”後可跟任何“表達式”，可以是一個字符串、一個“變量”，也可以是“函數”或“表達式”的運算結果。“=”後的內容會被轉碼-->
<div>包含內容,<b>表達式</b></div>
<!--不希望進行轉碼-->
<div>包含內用，<b>表達式</b></div>
<!--布爾屬性-->
<button disabled>屬性進行添加</button>
<button>屬性不進行添加</button>
<!--style寫法-->
<div style="color:undefined;padding:10px 10px">文本內容</div>
<div class="img">
<!--標籤自閉和屬性（img，input等）--><img src="/images/img1.jpg">
</div>
<!--jade的特殊字符“|”將後邊的內容原樣輸出-->
<!--注意：“|”作用域只有一行，多行用到“.”-->
<div class="demo2"><a href="http://www.baidu.com">百度</a>這是百度的網址</div>
<div>插入的jade語句是：<b>這個</b></div>
<!--嵌入JavaScript代碼（提高便利性，靈活性）-->
<!--“-”開頭-->
<p>這是一個p</p>
<p>這是一個p</p>
<p>這是一個p</p>
<!--遍歷語法-->
<div>0:one</div>
<div>1:two</div>
<div>2:three</div>
<!--while語法-->
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<!--if-->
<div>你猜</div>
<!--case-->
<div>是0</div>
<!--填充數據-->
<div>my name is zx <!--轉碼 --></div>
<div>my name is zx<!--不轉碼 --></div>
<!--繼承（關鍵字block替換的塊）-->
</body>
</html>