今天看到github上面一個vue專案，用的是Pug模板寫的，很多人不知道Pug是什麼，但要說到jade，相信很多人反應過來了。沒錯，Pug前身就叫jade,但是由於商標等問題，改名為Pug，當然，語法還是和原來一樣，在編輯器中使用模板，很多編輯器都帶有pug外掛，如sublime等，編譯的結果就是html正常的程式碼樣子了。

那Vue究竟如何與它結合的呢？

首先，除了要安裝pug，還要安裝pug-cli

npm install -g pug
npm install -g pug-cli

說實話，這個工具確實是為懶人準備的，語法好理解並且簡明扼要。

簡單來說，就是：標籤名+用於樣式的類名+（屬性） eg:div.className(v-if="showSomthing" :class=[xxx,yyy] :style="zzz")

vue檔案中首先要表明使用的是pug模板，如：<template lang="pug">，檢視層的資料繫結仍然用 {{ xxx }}，剩下的就可以自由發揮了。。。更深入的研究可以參考：https://github.com/pugjs/pug