在vue中使用pug

Posted 2022-05-18 smart-girl

安装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")