使用pug(jade),以及在vue+webpack中使用pug(jade)

一：在HTML中使用pug

在css中有預處理器less和scss來使我們的樣式表更加的簡介，那么在HTML中有沒有這樣的格式呢，答案是有的，那就是pug(前身是jade),效果如下：

轉譯以后

好，看步驟：

第一步：安裝pug:

#安裝支持pug依賴
npm install -g pug pug-loader pug-filters pug-cli

　　這個地方務必使用全局安裝，否則會出現“'pug' 不是內部或外部命令，也不是可運行的程序“

第二步：了解pug的語法：

具體大家可以去看一下這個官方文檔：https://pug.bootcss.com/language/includes.html，有不會的可以大家交流一下下

第三部：轉譯成html：

pug xxx.pug

　在命令行是執行這一行代碼即可轉譯成HTML的代碼

 

二：在vue+webpack中使用

第一步：安裝，不贅述，與上面第一步同；

第二步，在webpack.base.config.js里面進行配置：

把這三段代碼加進來：

{
  test: /\.scss$/,
  loader: 'style!css!sass?sourceMap'
},
{
  test: /\.jade$/,
  loader: "jade"
},
{
  test: /\.pug$/,
  loader: 'pug'
},

 第三步：在vue中使用pug:

我們只需要在template標簽里面加入lang=“pug”即可使用pug的語法