在 Vue 的template中使用 Pug 的完整教程

news2025/11/10 18:36:55

在 Vue 的template中使用 Pug 的完整教程

引言

什么是 Pug？

Pug（原名 Jade）是一种高效的网页模板引擎，通过缩进式语法和简洁的写法减少 HTML 的冗长代码。Pug 省略了尖括号和闭合标签，使用缩进定义结构，使代码更简洁、可读。

示例：Vue 单文件组件中使用 Pug 模板和使用 HTML 模板对比

以下是一个 Vue 单文件组件，展示同一段dom结构，Pug 的高级语法和 HTML 语法的对比：

Pug 特性展示：

Pug以缩进的方式决定标签层级，无需闭合标签
类名简写：.container 代替 <div class="container">，省略 div。
链式类名：.container.mx-auto.py-4 快速定义多个类名。
单行文本：标签后面可以直接书写文本。
多行文本：p 标签内的 el-tag(type='primary') 多行 和 | 的描述 展示多行文本的灵活性。
Vue 指令：v-for、v-if 和 @click 与 Pug 无缝集成。

Pug 的简洁性减少了约 40% 的开发代码量（基于字符数），并通过缩进清晰展示 DOM 结构。它的类名简写、链式类名和文本处理功能尤其适合快速开发。

设置开发环境

以下是 Vue 项目配置 Pug 的详细步骤，安装步骤配置即可。

1. 安装 Pug

安装 Pug 作为开发依赖：

npm install -D pug

说明：

安装后，Pug 将用于编译 <template lang="pug"> 中的模板。

2. 安装 Prettier 的 pug 插件

Prettier 是一个代码格式化工具，但默认不支持 Pug。为此，您需要安装 @prettier/plugin-pug 以支持 Pug 代码格式化：

npm install -D @prettier/plugin-pug

说明：

如果未安装 Prettier，先运行 npm install -D prettier。
该插件确保 Prettier 能正确格式化 Pug 代码，保持代码风格一致。

3. 配置 Prettier

在项目根目录创建或编辑 .prettierrc 文件，添加以下插件扩展的配置：

{
  // 其他配置......
  "plugins": ["@prettier/plugin-pug"],
  "pugCommentPreserveSpaces": "keep-all",
  "pugSortAttributes": "desc",
  "pugFramework": "vue",
  "pugSingleFileComponentIndentation": true
}

详细解释：

"plugins": ["@prettier/plugin-pug"]：启用 Pug 格式化。
"pugCommentPreserveSpaces": "keep-all"：保留注释前空格。
"pugSortAttributes": "desc"：按降序排序属性。
"pugFramework": "vue"：优化 Vue 单文件组件。
"pugSingleFileComponentIndentation": true：启用 SFC 缩进。

4. 安装 ESLint 插件

安装 eslint-plugin-vue-pug 以支持 Pug 模板的代码质量检查：

npm install -D eslint-plugin-vue-pug

说明：

如果未安装 ESLint 和 Vue 插件，先运行 npm install -D eslint eslint-plugin-vue。

5. 配置 ESLint

在 .eslintrc 中添加：

{
  // 其他配置......
  "extends": ["plugin:vue/vue3-recommended", "plugin:vue-pug/vue3-recommended"]
}

详细解释：

"plugin:vue/vue3-recommended"：Vue 3 的推荐规则。
"plugin:vue-pug/vue3-recommended"：支持 Pug 模板 linting。
该插件仅 lint 与 HTML 对应的 Pug 语法，暂不支持 Pug 的 mixin、循环等高级特性。
使用 LF 换行符以避免 Pug 词法分析错误。

6. 配置 Vite

编辑 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  // 其他配置......
  optimizeDeps: {
    include: ['pug']
  }
})

说明：

optimizeDeps.include: ['pug'] 确保 Vite 预构建 Pug。

7. 安装 Vue 语言插件

到这一步我们已经可以正常在 vue 里使用 pug 模板语法了，但是你会发现，在 vue 单文件组件里使用 pug 模板语法，vscode无法识别到模板里变量和方法，以及没有标签、属性、指令（如 v-if、v-for）、组件名等的自动补全，开发体验极差。

这里我们需要安装 @vue/language-plugin-pug 以支持 vscode 的变量识别和 vue 语法自动补全：

npm install -D @vue/language-plugin-pug

然后在 tsconfig.json 或者 jsconfig.json 中添加：

{
  "compilerOptions": {
    // 其他配置...
  },
  "vueCompilerOptions": {
    "plugins": ["@vue/language-plugin-pug"]
  }
}

说明：

启用 Pug 语言支持，确保 vscode 识别 Vue 的动态语法。

在 `Vue` 单文件组件中使用 `Pug`

(由于文章代码块不支持pug代码高亮，以下示例全部使用截图展示)

基本使用

使用 <template lang="pug"> 定义模板：

pug

说明：

div标签可以直接省略标签名，比如<div class="container"> 简写 .container。
lang="pug" 指示使用 Pug 解析。
单行文本可以直接写在标签后边，
如：h1.text-xl Hello, Pug in Vue!，等同于<h1 class="text-xl">Hello, Pug in Vue!</h1>

处理变量和表达式

使用 Vue 的 {{ }} 插值：

pug

说明：

{{ user.name }} 和 {{ user.description }} 使用 Vue 插值。
.card.p-4 展示链式类名。

使用 Vue 指令

Pug 支持 Vue 指令：

pug

说明：

v-for 和 v-if 使用 Vue 语法。
.list-container.mx-auto 和 .item.py-2 展示类名简写和链式写法。

单行和多行文本

Pug 提供灵活的文本处理：

pug

说明：

标签后面可以直接书写文本，也可以另起一行使用|开头书写文本。
p 内的 | 这是一个 和 strong.text-red-500 多行 展示多行文本，支持内嵌标签。

组件注册和使用

pug

说明：

组件可以直接在 Pug 中使用，结构简洁。

常见问题排查

问题	解决方案
变量无法识别	确保 `@vue/language-plugin-pug` 已配置。
缩进错误	使用 2 个空格，检查 `.prettierrc` 配置。
ESLint 报错	验证 `.eslintrc` 包含 `plugin:vue-pug/vue3-recommended`。