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