在vue中使用pug

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

xjGenese

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

阅读量949

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40738689/article/details/106200830

本文介绍了如何在Vue.js项目中配置并使用Pug模板，包括安装Pug插件、修改vue.config.js设置。同时，文章详细讲解了Pug的基础语法，如符号、分支条件和条件语句，强调了Pug的缩进规则及其简化HTML编写的优势。

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

配置pug

在项目中安装pug插件

yarn add pug  pug-html-loader pug-plain-loader

更改vue.config.js

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

基础语句

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

pug一些基础语法

1.符号

符号	含义
.	表示之后的内容翻译为纯文本,插入大文本块
\|	表示之后的内容翻译为纯文本，不识别 html 标签
//	注释，在编译出来的 html 中显示
//	注释，在编译出来的 html 中不显示
-	后接 js 代码
#	{变量} 转义插值
!	{变量} 非转义插值
/	自闭和标签
:	块展开

举个🌰

p
  | 如果我不用嵌入功能来书写，一些标签比如
  strong strong
  | 和
  em em
  | 可能会产生意外的结果。

等价于

<p> 如果我不用嵌入功能来书写，一些标签比如<strong>strong</strong>和<em>em</em>可能会产生意外的结果.

🌰

p.
  如果用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。
 //等价于
 <p>如果用了嵌入，在 <strong>strong</strong> 和 <em>em</em> 旁的空格就会让我舒服多了。</p>

div/
foo(bar='baz')/

<div/>
<foo bar="baz" />

2分枝条件

pug的分支类似于javascript中的case语句,可以像js里面的 switch 语句那样使用传递。
有两种写法

- var today = 5
case today
  when 0
   -break
  when 1: p 星期1
  default: p 星期 #{today} 
//
- var today = 0
case today
  when 0
  when 1
    p 星期1
  default
    p 星期 #{today}

3.条件语句

- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2.green 描述
    p.description= user.description
  else if authorised
    h2.blue 描述
    p.description.
      用户没有添加描述。
      不写点什么吗……
  else
    h2.red 描述
    p.description 用户没有描述

今天尝试了一下简单的pug写法，自己对pug的认识是，将语句变得简单，而且可以通过‘-’插入js语句，比如上面的‘var today=0’之类。因为语句变得简单，所以pug会更加强调缩进，pug通过缩进来判断语句和语句之间的关系。