Pug 介绍和在 Vue 中使用
1 介绍
pug 是一种前端模板引擎，原名 jade
可用来生成 HTML，它的写法类似于 CSS
中文文档
这里先简单举几个
#hello
<div id="hello">div>
a.link-button Link
<a class="link-button">Linka>
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 使用
div.hello
h1 Hello World
3 实践
3.1 举例
下面将拿出实际项目中的一些代码进行改造
- 原代码
20 行，所有标签完全闭合
{{ $t('add') }}
{{ $t('update') }}
{{ $t('delete') }}
- 改造后
13 行，标签完全简化
"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') }}
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>foop>
<p>barp>
- 不输出注释
//- 这行不会出现在结果中
p foo
p bar
<p>foop>
<p>barp>
- 块注释
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>strongstrong>和<em>emem>可能会产生意外的结果。p>
<p>如果用了嵌入，在 <strong>strongstrong> 和 <em>emem> 旁的空格就会让我舒服多了。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 后 记
感谢支持。
若不足之处，欢迎大家指出，共勉。
如果觉得不错，记得 点赞，谢谢大家 ʚɞ
欢迎关注。
- GitHub
- 掘 金
- 简 书
5.1 原文地址
https://xrkffgg.github.io/Knotes/blog/15.html