1 介紹
pug 是一種前端模板引擎颖侄，原名 jade
可用來生成 HTML昭卓，它的寫法類似于 CSS
這里先簡單舉幾個 ??
#hello
<div id="hello"></div>
a.link-button Link
<a class="link-button">Link</a>
a() 我的網(wǎng)站
<a >我的網(wǎng)站</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 注釋
- 單行
// 一些內(nèi)容
p foo
p bar
<!-- 一些內(nèi)容 -->
<p>foo</p>
<p>bar</p>
- 不輸出注釋
//- 這行不會出現(xiàn)在結(jié)果中
p foo
p bar
<p>foo</p>
<p>bar</p>
- 塊注釋
body
//
一堆
文字
進行中
<body>
<!-- 一堆
文字
進行中 -->
</body>
4.4 符號
- 管道文字（
|）：向模板添加純文本
p
| 管道符號總是在最開頭鳖目，
| 不算前面的縮進。
<p>管道符號總是在最開頭唁情， 不算前面的縮進疑苔。
</p>
a ……用一個鏈接結(jié)束的句子
| 甫匹。
<a>……用一個鏈接結(jié)束的句子</a>甸鸟。
| 千萬別
|
button 按
|
| 我！
千萬別
<button>按</button> 我兵迅！
-
#[ ]標簽嵌入
p.
這是一個很長很長而且還很無聊的段落抢韭，還沒有結(jié)束，是的恍箭，非常非常地長刻恭。
突然出現(xiàn)了一個 #[strong 充滿力量感的單詞]，這確實讓人難以 #[em 忽視]。
p.
使用帶屬性的嵌入標簽的例子：
#[q(lang="es") ?Hola Mundo!]
<p>這是一個很長很長而且還很無聊的段落鳍贾，還沒有結(jié)束鞍匾，是的，非常非常地長骑科。 突然出現(xiàn)了一個 <strong>充滿力量感的單詞</strong>橡淑，這確實讓人難以 <em>忽視</em>。</p>
<p>使用帶屬性的嵌入標簽的例子：
<q lang="es">?Hola Mundo!</q></p>
p
| 如果我不用嵌入功能來書寫咆爽，一些標簽比如
strong strong
| 和
em em
| 可能會產(chǎn)生意外的結(jié)果梁棠。
p.
如果用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就會讓我舒服多了斗埂。
<p>如果我不用嵌入功能來書寫符糊，一些標簽比如<strong>strong</strong>和<em>em</em>可能會產(chǎn)生意外的結(jié)果。</p>
<p>如果用了嵌入呛凶，在 <strong>strong</strong> 和 <em>em</em> 旁的空格就會讓我舒服多了男娄。</p>
.
// 大文本塊
p.
使用常規(guī)的標簽可以讓您的代碼行短小精悍，
但使用嵌入標簽會使代碼變得更 #[em 清晰易讀]把兔。
——如果您的標簽和文本之間是用空格隔開的沪伙。
<p>使用常規(guī)的標簽可以讓您的代碼行短小精悍， 但使用嵌入標簽會使代碼變得更 <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 后 記
感謝支持。
若不足之處缕贡，歡迎大家指出翁授，共勉。
如果覺得不錯晾咪，記得 點贊收擦，謝謝大家 ????
歡迎關(guān)注。
