是啥

Pug聽起來或許比較陌生，但是如果說起她的前生，相信各位多少會有耳聞：Jade。
每當你不聽的敲打<><><><></></></></>的時候，可曾想過，這該死的箭頭是不是可以拿掉？這不單單是看著不舒服，有時候還會因為行數過多，而導致你頭暈眼花。
或許你知道，有個東西叫emmet，它是解決了你寫的時候多寫的那些內容，但是並沒有解決冗余的代碼行數，更不要提在你沒有完全熟練使用emmet前，腦子裏面需要進行大量的預翻譯！
那麽是否有一種既能減少代碼量，又能不做預翻譯的方案呢，吶吶吶，Jade這個後端模板出現了，然後改名叫Pug了，現在Vue也支持這個語法，具體請往下看。

如何使用

1. npm i -D pug pug-loader
2. <template lang=‘pug‘> 即可

本人喜歡使用Pug、CoffeeScript、Sass，前兩者有共有的哲學，CoffeeScript說自己就是JavaScript，同樣的，Pug也就是HTML，你可以理解成語法糖。

功力如何

1. 我們先來看一段HTML代碼

   <label>
       <input type=‘checkbox‘ />
       <span>記住密碼</span>
       <div class=‘show-box‘></div>
   </label>
    
   

   95個字符，5行，3個結束標簽

   整成Pug
   label input(type="checkbox") span 記住密碼 .show-box

   54個字符，4行，沒有結束標簽

2. 差別有了，驚不驚喜？再來！

   <div class="container">
     <div class="ver seller">
       <input type="number" v-model="storeId" placeholder="輸入店號" @focus="passwordShow=false" class="storeId"/>
       <div class="nav">
         <button @click="clickGo(0)" class="go">我是賣家</button>
         <button @click="clickRegist" class="little">註冊賣家</button>
         <button @click="clickGo(1)" class="go">我是買家</button>
       </div>
     </div>
     <div v-if="passwordShow" class="ver password">
       <input type="password" v-model="password" placeholder="輸入你的6位密碼" class="storeId"/>
       <button @click="login" class="go">點擊登錄</button>
     </div><span v-if="passwordShow" @click="passwordShow=false" class="buyer-show">重置</span>
   </div>
    
   

   15行，671個字符，9個結束標簽

   .container
     .ver.seller
       input.storeId(type=‘number‘ v-model=‘storeId‘ placeholder=‘輸入店號‘ @focus=‘passwordShow=false‘)
       .nav
         button.go(@click=‘clickGo(0)‘) 我是賣家
         button.little(@click=‘clickRegist‘) 註冊賣家
         button.go(@click=‘clickGo(1)‘) 我是買家
     .ver.password(v-if=‘passwordShow‘)
       input.storeId(type=‘password‘ v-model=‘password‘ placeholder=‘輸入你的6位密碼‘)
       button.go(@click=‘login‘) 點擊登錄
     span.buyer-show(v-if=‘passwordShow‘ @click=‘passwordShow=false‘) 重置

   11行，481個字符，沒有結束標簽（這裏我個人書寫習慣是回車切割，為了統一對比采用這種寫法）

3. 簡單推算

   大約代碼量節省30%，行數節省20%。如果公司績效算行數或代碼量的千萬別用- -

   tips

4. Vue 使用有沒有什麽需要註意的地方

   沒有，完全沒有，該“：”就冒號，該“@”就shift+2

5. 一些小坑

   註意使用“|”符號來切割文字，如：
   span i span.red love | you // 這裏沒必要再用一個span，使用“|”即可

6. Pug其他功能

   這裏記得Pug是後端模板起家，所以功能肯定不單單是簡化語法這麽簡單，她也有變量、混合、過濾等等等等功能，但是實際上這些功能在使用中跟Vue功能重復，我們搭建項目主要還是Vue，所以能用Vue的就用Vue的，Pug對於我們項目來說，最大的功能就是精簡和整理代碼。
   後續還會有Sass與CoffeeScript教程，這三個搭配在一起，恩，基本就是無多余代碼的極簡風了。
   如需了解其他功能，請前往官網查閱：Pug官網

7. 強烈建議

   Pug，CoffeeScript，以及Sass聯合使用，會有奇效！其他兩個方案，我會在後續文章中跟進，敬請期待！、

   期待

希望各位大大關註以及積極評論，只有交流才有進步！我會努力把自己知道的小技巧奉獻給大家，剛開始寫文，文筆希望各位諒解。謝謝

Vue進階課堂之《從HTML到Pug》