From ccb08b1004db25ea146be8674d3b610a6bb216ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=96=87=E6=B0=B8=E8=BE=BE?= Date: Thu, 23 Mar 2023 01:04:11 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/_posts/Vue.md | 363 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 363 insertions(+) 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 + +``` + + + +使用后 + +```less + +``` + # Vben Admin