首页 > 其他 > 详细

在vue中使用pug

时间:2019-07-26 18:40:41      阅读:76      评论:0      收藏:0      [点我收藏+]

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

在vue中使用pug

原文:https://www.cnblogs.com/smart-girl/p/11251105.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!