在vue中使用pug

安裝pug

npm i pug pug-loader pug-cli pug-filters -D

pug ：安裝pug
pug-loader：pug的loader
pug-cli：pug 編譯工具
pug-filters：pug的過濾器

接着在webpack中進行配置

module: {
    rules: [
      {
        test:/\.jade$/,
        loader:"jade"
      },{
        test:/\.pug/,
        loader:"pug"
      },
  ]
}

最后在vue 模板中添加編譯語言pug即可

1. 聲明pug語言
   在 .vue 文件中，使用 聲明pug模板。
2. 書寫屬性及文本
   1.在 .vue 文件中,使用 tagname.className(attributeName="attributeValue") textContent格式書寫。
   舉例： div.test(:data="data-var") {{ data.text}}
   2.注意：圓括號前沒有空格，圓括號后面有空格
   3.如果有多個attribute，可以分行寫或者用逗號隔開。
   舉例：

  // 分行
    slot(:msg="msg"
      class="hahah")
  // 一行
    slot(:msg="msg" class="hahah")
// 使用逗號
    slot(:msg="msg", class="hahah")