pug模板的好处：
1.无需结束标签
在html中，几乎每个标签都需要写相应的结束标签，这既耗费时间和精力又使代码更加冗长，而且万一忘了写结束标签会导致不可预期又难以定位的错误。相比之下，pug没有结束标签，代码更加简洁高效。
2.强制缩进
强制缩进有人喜欢有人不喜欢，但是它带来的好处却是无可置疑的：它使得团队中所有人的风格都统一了起来，使得阅读别人的代码不再那么恐怖，让所有人都养成了缩进代码的好习惯，也减少了因为代码格式化产生的冲突等问题。
3.代码复用和维护
pug中的include功能让我们可以不再一遍又一遍地写相同的代码，如头部引用和组件模板等。遇到要修改时也不用一个又一个地去搜索和修改每一个地方，只需修改一个地方一次。
4.标签写法与CSS相同
pug中的标签的写法与CSS中的选择器相同，因此写CSS时更加方便，可以直接拷贝tag作为选择器编写样式。
缺点有：
1. 一旦强制缩进嵌套过多，阅读起来比较吃力。
2. pug模板和最后生成的html页面有一定差距。有时调试起来并不容易。
需要构建环境
第一步，下载node.js和 npm
第二步， 按node -v 和 npm -v 查看是否下载成功
第三步， 按 sudo npm install pug-cli -g 全局安装 pug --help 查看是否安装成功
第四步， 创建index.pug 文件 ，为了便于看到pug生成的HTML文档，可以使用pug -P -w xxx.pug,会自动在xxx.pug文件夹下生成一个xxx.html的文件，-P参数可以让html文档变得有可读性，-w可以实时监控.pug文件的修改，如果有变化就自动更新相应的html文件。常用的还有-o用来指定输出的html的目录。
编译后的结果为：
Vue 中使用 Pug
在 Vue 的单文件组件中的 <template> 中可以使用 Pug 进行模板的编写（JADE步骤相同）
首先安装 Pug 依赖
npm install pug pug-loader pug-filters -D安装成功后，在 webpack 的配置文件 webpack.base.conf.js 的 modules 中的 rules 节点下添加如下配置：
{
test: /\.pug$/,
loader: 'pug'
}
这样，.vue 单文件组件 就支持 Pug 并实时编译了。
<template lang="pug">
ul
- var arr = [1,2,3]
each value in arr
li(id="test" + value) value + {{this.name}}
</template>
<script>
export
default {
data() {
return {
name: 'chow'
}
},
computed: {},
methods: {},
components: {}
}
</script>语法学习请参考官网文档https://pug.bootcss.com/api/getting-started.html