vue2.0中使用pug(jade)

第一部分：pug(jade)模板引擎

      pug，原名jade，是流行的HTML模板引擎，它是HAML在JavaScript上的實現，最大的特點是使用縮進排列替代成對標籤。

      它簡化了HTML的成對標籤的寫法，使代碼更加簡潔、開發效率更高，可是同時它也帶來了一些反作用：可移植性差、調試困難、性能並不出色。

 

第二部分：vue2.0中使用pug(jade)

      Step1：安裝pug和jade依賴

#安裝支持pug依賴 npm install pug pug-loader pug-filters -D #安裝支持jade依賴 npm install jade jade-loader -D

      

 

      Step2：配置pug和jade

      打開webpack.base.conf，在module的rules節點下添加以下配置：      

{ test: /\.jade$/, loader: "jade" }, { test: /\.pug$/, loader: 'pug' },

       這樣咱們的.vue文件就支持pug的語法了。

      Step3：嘗試使用pug語法

      

      

      渲染後，咱們能夠看到效果：

      

      能夠看到，咱們可使用pug來編寫咱們的html，同時還能夠結合vue的語法。

 

參考文檔

       https://github.com/pugjs/pug

      https://segmentfault.com/a/1190000007556806

      https://www.cnblogs.com/xiaohuochai/p/7222227.html

      https://zhuanlan.zhihu.com/p/25177324

      https://pug.bootcss.com/api/getting-started.html

      http://www.jianshu.com/p/36b9be2f3f85

      https://segmentfault.com/a/1190000006198621

      http://www.jianshu.com/p/05ed25bfc2c5

      https://segmentfault.com/a/1190000007556806

      http://www.jianshu.com/p/53def6da5dd7