diff --git a/source/_posts/Vue.md b/source/_posts/Vue.md
index 5094c4c..e59c18c 100644
--- a/source/_posts/Vue.md
+++ b/source/_posts/Vue.md
@@ -867,6 +867,369 @@ export default {
```
+# Pug.js
+
+Pug（之前称为Jade）是一种简洁而灵活的模板引擎，用于构建HTML。Pug使用缩进和标记替代了常见的HTML标记，这使得它更易于阅读和编写。它也提供了一些功能，如变量、循环和条件语句等，可以帮助开发人员更轻松地构建动态的网页。
+
+## 特性
+
+### 属性
+
+如果一个标签有多个属性，可使用 分行 或 逗号
+
+```less
+// 1
+el-button(v-if="ifShow" type="size" size="small" @click="doClidk") 点击
+// 2
+el-button(v-if="ifShow",type="size",size="small",@click="doClidk") 点击
+// 3
+el-button(v-if="ifShow"
+ type="size"
+ size="small"
+ @click="doClick") 点击
+```
+
+### 注释
+
+- 单行
+
+```xml
+// 一些内容
+p foo
+p bar
+
+
+foo
+bar
+```
+
+- 不输出注释
+
+```less
+//- 这行不会出现在结果中
+p foo
+p bar
+
+foo
+bar
+```
+
+- 块注释
+
+```xml
+body
+ //
+ 一堆
+ 文字
+ 进行中
+
+
+
+
+```
+
+
+
+## Vue 2集成Pug.js
+
+Vue CLI安装Pug.js
+
+```shell
+npm i -D pug pug-html-loader pug-plain-loader
+```
+
+vue.config.js配置
+
+```javascript
+// vue.config.js
+module.exports = {
+ chainWebpack: config => {
+ config.module.rule('pug')
+ .test(/\.pug$/)
+ .use('pug-html-loader')
+ .loader('pug-html-loader')
+ .end()
+ }
+}
+```
+
+使用前
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 搜索
+ 重置
+
+
+
+
+
+
+ 新增
+
+
+ 修改
+
+
+ 删除
+
+
+ 导出
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 修改
+ 删除
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ dict.label }}
+
+
+
+
+