1. 程式人生 > >初識前端模板引擎jade

初識前端模板引擎jade

1.什麼是模板引擎?(我的理解)

模板引擎:為了使使用者介面與業務資料(內容)分離而產生的,根據特定的規則生成特定文件,各個領域都可以有自己的模板引擎。
web模板引擎:最終生成的文件是HTML型別。
而這種規則有五花八門,各種各樣的規則就是不同的模板引擎。
本文主要講jade

2.jade的安裝(windows)

jade是基於nodeJs的,所以首先要安裝執行環境 nodeJs,包管理工具npm
如果接觸過的node,相信大家已經安裝了,我就不再囉嗦。

jade安裝(全域性安裝):npm install -g jade

這裡寫圖片描述

開發工具: sublime,webstorm 等

這裡寫圖片描述

就兩個工具對比了一下(如上圖),會發下這個sublime都是白色,沒有語法可言,相比webstorm還是不錯的。
如果你真的喜歡用sublime開發,不用擔心,根據這篇文章安裝外掛就可以實現語法高亮。

3.編寫與執行

這裡寫圖片描述

執行命令:jade index.jade

如何你需要生成的html檔案是可讀的(正常的html),而不是圖中的壓縮後的,

執行命令:jade index.jade -P,結果如下圖

這裡寫圖片描述

實時編譯檢測
上面的做法,每次修改完成之後,都需要重新編譯,很麻煩,而我們更需要的是,jade檔案修改,html立即修改,就是實時監測變化

執行命令:jade index.jade -P -w

4.應用學習

目前我就掌握下面這些語法規則,大家可以對比學習,更多語法需努力學習!

這裡寫圖片描述