Pug的安装与使用

为什么使用pug

使用<>闭合标签，一个标签需要有起码两行代码，而pug则使用一行就行了，省略标签名，使用习惯了，更容易发现代码出现的问题。

pug就是当年的jade，源自于后端，因为现在前端node的发展，前端node能力已有很大的进步，pug里很多语法会用不到，比如配合vue使用。如果用jq这种开发模式，还是可以用到的。

安装与使用

cnpm i pug pug-html-loader pug-plain-loader -D

在vue-cli3.0的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'，配合vscode插件 pug 和 Pug (Jade) snippets 可以实现pug语法的高亮与联想

语法

vue中使用pug语法示例

html语法	pug语法
<div class="container">	.container
<img :src="url" alt="">	img(:src="url")
<span v-if="isShow">显示</span>	span(v-if="isShow") 显示
<div class="btn" @click="goPage">按钮</div>	.btn(@click="goPage") 按钮
<div v-for="(item, i) in list" :key="i">	div(v-for="(item, i) in list" :key="i")
<div class='tabs' :class="{'fixed':isFixed}"></div>	.tabs(:class="{'fixed':isFixed}")

参考文档

1. Pug 模板引擎中文文档
2. vue脚手架中 pug插件配置