pug在Vue中的使用--笔记

最新推荐文章于 2025-06-05 16:11:58 发布

xk_initial

最新推荐文章于 2025-06-05 16:11:58 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue npm

本文链接：https://blog.youkuaiyun.com/xk_initial/article/details/107312253

本文详细介绍如何在Vue项目中安装和配置pug模板引擎，包括必要的依赖包安装、webpack配置以及在Vue组件中使用pug语法的具体示例。通过pug的缩进和换行特性，以及其强大的循环和条件语句，可以更简洁地编写Vue模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pug在Vue中的使用

安装pug

npm i -D pug pug-html-loader pug-plain-loader

pug ：安装pug
pug-loader pug的loader
pug-cli：pug 编译工具
pug-filters：pug的过滤器

在vue.config.js 中配置

module.exports = {
  chainWebpack: config => {
      config.module.rule('pug')
          .test(/\.pug$/)
          .use('pug-html-loader')
          .loader('pug-html-loader')
          .end()
  }
}

在vue模板中添加编译语言pug即可

<template lang='pug' ></template>

pug 的中的for循环与 vue中的for循环都可以用

      div
        //-  这是注释，测试pug，for循环(1)
        div.title 测试pug，for循环(1)
        ul
            - let foo = [{name:'小站',age:25,sex:0},{name:'王波',age:18,sex:0},{name:'张二',age:30,sex:1}]
            each item in foo
                li
                    span.listItem= `名字:${item.name}——`
                    span
                      = `年龄:${item.age}——`
                    span(style= `${Object.is(item.sex,0) ? "color:blue;" : "color:red;"}`)= `性别:${Object.is(item.sex,0) ? "男" : "女"}`
        div
          li(v-for= '(item,index) in bar') Info: {{item}}

pug 是一种用缩进和换行区分代码块的语法

div: p 输入框名字

这种写法与上面的写法相同

div 
  p 输入框名字

语法一：
在这里插入图片描述
试了下 p 这是一段纯洁的!{text}内容这个语法不能用

    p  
        |  管道符总是在最开头，
        |  不算前面的缩进

这个语法也只能写一个，写两个就报错了
语法二：
在这里插入图片描述
语法三：

另外可以在template中使用src属性引入.pug 文件，这样的话可以将pug的代码抽离出来了

<template src='./mydemo.pug' >
</template>

mydemo.pug文件

div
    //-  这是注释，测试pug，for循环(1)
    div.title 测试pug，for循环(1)
    ul
        - let foo = [{name:'小站',age:25,sex:0},{name:'王波',age:18,sex:0},{name:'张二',age:30,sex:1}]
        each item in foo
            li
                span.listItem= `名字:${item.name}——`
                span
                    = `年龄:${item.age}——`
                span(style= `${Object.is(item.sex,0) ? "color:blue;" : "color:red;"}`)= `性别:${Object.is(item.sex,0) ? "男" : "女"}`

    div
        li(v-for= '(item,index) in bar') Info: {{item}}
    div: p 输入框名字
    div 
        p 输入框名字
    - var text= '<em>文本<em>'
    p= `带有变量的文字${text}`
    //- .语法可以直接换行
    p.  
        这个是一个段纯洁的文本
    //- 这个语法也只能写一个，写两个就报错了
    div  
        |  管道符总是在最开头，
        p  不算前面的缩进
        |  dafadf
    mixin pet(name)
        li= name
    ul  
        +pet('猫猫')
        +pet('狗狗')
        +pet('笨笨')

原文链接