Pug 介绍和在 Vue 中使用

头像
xrkffgg
    阅读 5 分钟

    1 介绍

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

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

    中文文档

    这里先简单举几个 🌰

    #hello
<div id="hello"></div>
    a.link-button Link
<a class="link-button">Link</a>
    a(href="https://xrkffgg.github.io/Knotes/") 我的网站
<a href="https://xrkffgg.github.io/Knotes/">我的网站</a>

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

    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 使用

    <template lang="pug">
    div.hello
        h1 Hello World
</template>

    3 实践

    3.1 举例

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

    • 原代码
    20 行，所有标签完全闭合
    <template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dept">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;">
        <el-table-column prop="name" :label="$t('dept.name')" header-align="center" min-width="150"></el-table-column>
        <el-table-column prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center"></el-table-column>
        <el-table-column prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>
    • 改造后
    13 行，标签完全简化
    <template lang="pug">
  el-card.aui-card--fill(shadow="never")
    .mod-sys__dept
      el-form(:inline="true" :model="dataForm" @keyup.enter.native="getDataList()")
        el-form-item
          el-button(type="primary" @click="addOrUpdateHandle()") {{ $t('add') }}
      el-table(v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;")
        el-table-column(prop="name" :label="$t('dept.name')" header-align="center" min-width="150")
        el-table-column(prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center")
        el-table-column(prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80")
        el-table-column(:label="$t('handle')" fixed="right" header-align="center" align="center" width="150")
          template(slot-scope="scope")
            el-button(type="text"
                      size="small"
                      @click="addOrUpdateHandle(scope.row.id)") {{ $t('update') }}
            el-button(type="text"
                      size="small"
                      @click="deleteHandle(scope.row.id)") {{ $t('delete') }}
</template>

    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

<!-- 一些内容 -->
<p>foo</p>
<p>bar</p>
    • 不输出注释
    //- 这行不会出现在结果中
p foo
p bar

<p>foo</p>
<p>bar</p>
    • 块注释
    body
    //
        一堆
        文字
        进行中

<body>
    <!-- 一堆
         文字
         进行中 -->
</body>

    4.4 符号

    • 管道文字（ | ）：向模板添加纯文本
    p
  | 管道符号总是在最开头，
  | 不算前面的缩进。

<p>管道符号总是在最开头， 不算前面的缩进。
</p>
    a ……用一个链接结束的句子
| 。

<a>……用一个链接结束的句子</a>。
    | 千万别
|
button 按
|
| 我！

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

<p>这是一个很长很长而且还很无聊的段落，还没有结束，是的，非常非常地长。 突然出现了一个 <strong>充满力量感的单词</strong>，这确实让人难以 <em>忽视</em>。</p>
<p>使用带属性的嵌入标签的例子：
  <q lang="es">¡Hola Mundo!</q></p>
    p
  | 如果我不用嵌入功能来书写，一些标签比如
  strong strong
  | 和
  em em
  | 可能会产生意外的结果。
p.
  如果用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就会让我舒服多了。

<p>如果我不用嵌入功能来书写，一些标签比如<strong>strong</strong>和<em>em</em>可能会产生意外的结果。</p>
<p>如果用了嵌入，在 <strong>strong</strong> 和 <em>em</em> 旁的空格就会让我舒服多了。</p>
    • .
    // 大文本块
p.
  使用常规的标签可以让您的代码行短小精悍，
  但使用嵌入标签会使代码变得更 #[em 清晰易读]。
  ——如果您的标签和文本之间是用空格隔开的。

<p>使用常规的标签可以让您的代码行短小精悍， 但使用嵌入标签会使代码变得更 <em>清晰易读</em>。 ——如果您的标签和文本之间是用空格隔开的。
</p>
    // 纯文本块
div
  p This text belongs to the paragraph tag.
  br
  .
    This text belongs to the div tag.

<div>
  <p>This text belongs to the paragraph tag.</p><br/>This text belongs to the div tag.</div>
    • : 块展开
    a: img

<a><img/></a>
    • / 自闭和标签
    foo/
foo(bar='baz')/

<foo/>
<foo bar="baz" />

    5 后 记

    感谢支持。

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

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

    欢迎关注。

    5.1 原文地址

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

    vue.jspughtmlcss
    xrkffgg
    489 声望29 粉丝
    « 上一篇
    tabindex 用法说明
    下一篇 »
    Issues 助手 —— 一个轻松帮你自动管理 issues 的 GitHub Action

    引用和评论

    推荐阅读
    头像
    Issues 助手 —— 一个轻松帮你自动管理 issues 的 GitHub Action

    xrkffgg阅读 2.9k

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    0 条评论
    得票最新