在 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
