在 Vue 的template中使用 Pug 的完整教程
在 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"> 定义模板：
说明：
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 的 {{ }} 插值：
说明：
{{ user.name }}和{{ user.description }}使用 Vue 插值。.card.p-4展示链式类名。
使用 Vue 指令
Pug 支持 Vue 指令：
说明：
v-for和v-if使用 Vue 语法。.list-container.mx-auto和.item.py-2展示类名简写和链式写法。
单行和多行文本
Pug 提供灵活的文本处理：
说明：
- 标签后面可以直接书写文本，也可以另起一行使用
|开头书写文本。 p内的| 这是一个和strong.text-red-500 多行展示多行文本，支持内嵌标签。
组件注册和使用
说明：
- 组件可以 直接在 Pug 中使用，结构简洁。
常见问题排查
| 问题 | 解决方案 |
|---|---|
| 变量无法识别 | 确保 @vue/language-plugin-pug 已配置。 |
| 缩进错误 | 使用 2 个空格，检查 .prettierrc 配置。 |
| ESLint 报错 | 验证 .eslintrc 包含 plugin:vue-pug/vue3-recommended。 |
进一步学习资源
- Pug 官方文档
- Vue.js 官方文档
- @prettier/plugin-pug
- eslint-plugin-vue-pug
- @vue/language-plugin-pug