Pug 介绍和在 Vue 中使用

1 介绍

pug 是一种前端模板引擎，原名 jade

可用来生成 HTML，它的写法类似于 CSS

中文文档

这里先简单举几个

#hello

a.link-button Link
Link

a(href="https://xrkffgg.github.io/Knotes/") 我的网站
我的网站

易理解，同时极大的简约了我们的代码。

2 安装

2.1 下载

npm i -D pug pug-html-loader pug-plain-loader
# or
yarn add pug pug-html-loader pug-plain-loader

2.2 配置

// vue.config.js
module.exports = {
    chainWebpack: config => {
      config.module.rule('pug')
        .test(/\.pug$/)
        .use('pug-html-loader')
        .loader('pug-html-loader')
        .end()
  }
}

2.3 使用

3 实践

3.1 举例

下面将拿出实际项目中的一些代码进行改造

原代码

20 行，所有标签完全闭合

改造后

13 行，标签完全简化

el-button 由于属性过长，使用了分行

4 特性

4.1 支持

支持 Vue 的 : @
支持 ES6 模板字符串

4.2 属性

如果一个标签有多个属性，可使用分行或逗号

// 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") 点击

4.3 注释

单行

// 一些内容
p foo
p bar


foo
bar

不输出注释

//- 这行不会出现在结果中
p foo
p bar

foo
bar

块注释

body
    //
        一堆
        文字
        进行中

4.4 符号

管道文字（ | ）：向模板添加纯文本

p
  | 管道符号总是在最开头，
  | 不算前面的缩进。

管道符号总是在最开头， 不算前面的缩进。

a ……用一个链接结束的句子
| 。

……用一个链接结束的句子。

| 千万别
|
button 按
|
| 我！

千万别
 我！

# [ ] 标签嵌入

p.
  这是一个很长很长而且还很无聊的段落，还没有结束，是的，非常非常地长。
  突然出现了一个 #[strong 充满力量感的单词]，这确实让人难以 #[em 忽视]。
p.
  使用带属性的嵌入标签的例子：
  #[q(lang="es") ¡Hola Mundo!]

这是一个很长很长而且还很无聊的段落，还没有结束，是的，非常非常地长。 突然出现了一个 充满力量感的单词，这确实让人难以 忽视。
使用带属性的嵌入标签的例子：
  ¡Hola Mundo!

p
  | 如果我不用嵌入功能来书写，一些标签比如
  strong strong
  | 和
  em em
  | 可能会产生意外的结果。
p.
  如果用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。

如果我不用嵌入功能来书写，一些标签比如strong和em可能会产生意外的结果。
如果用了嵌入，在 strong 和 em 旁的空格就会让我舒服多了。

// 大文本块
p.
  使用常规的标签可以让您的代码行短小精悍，
  但使用嵌入标签会使代码变得更 #[em 清晰易读]。
  ——如果您的标签和文本之间是用空格隔开的。

使用常规的标签可以让您的代码行短小精悍， 但使用嵌入标签会使代码变得更 清晰易读。 ——如果您的标签和文本之间是用空格隔开的。

// 纯文本块
div
  p This text belongs to the paragraph tag.
  br
  .
    This text belongs to the div tag.


  This text belongs to the paragraph tag.

This text belongs to the div tag.

: 块展开

a: img

/ 自闭和标签

foo/
foo(bar='baz')/

5 后记

感谢支持。

若不足之处，欢迎大家指出，共勉。

如果觉得不错，记得点赞，谢谢大家 ʚɞ

欢迎关注。

5.1 原文地址

https://xrkffgg.github.io/Knotes/blog/15.html