为什么使用pug
Pug，原名jade，是流行的HTML模板引擎，最大的特色是使用缩进排列替代成对标签，简化了HTML的成对标签的写法
优势：
代码更加简洁、极大提高开发效率
安装及使用
安装
npm i -D pug pug-html-loader pug-plain-loader
配置
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module.rule('pug')
.test(/\.pug$/)
.use('pug-html-loader')
.loader('pug-html-loader')
.end()
使用
<template lang="pug">
div.hello
h1 Hello World
</template>
改造实践
原代码：
<template>
<div v-for="item in list" :key="item.id">
<el-row class="job-list">
<el-col :span="10" :offset="1">{{ item.name }}</el-col>
<el-col :span="10" :offset="1">{{ item.name }}</el-col>
<el-col :span="4">
<i class="el-icon-close" @click="handleClick(item)" />
</el-col>
</el-row>
</div>
</template>
Pug改造后，11行代码变成8行，标签完全简化：
<template lang='pug'>
div(v-for="item in list" :key="item.id")
el-row.job-list
el-col.job-item(:span="10" :offset="1") {{ item.name }}
el-col.job-item(:span="10" :offset="1") {{ item.sex }}
el-col.job-item(:span="4")
i.el-icon-close(@click="handleClick(item)")
</template>
语法
Pug和HTML最大的不同在于它拥有自己的语法，拥有循环、条件控制、定义变量等功能。可以说如果在没有前端框架的年代，这些功能是多么的有诱惑力，但是，近几年React、Vue的出现，已经解决了这些痛点，所以在这里就不一一介绍了，如果有需要可以在Pug官方文档上进行学习
