在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")