在 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