Vue中lang=pug模板引擎之pug模板语法

入职后，看到同事的代码当时一脸懵逼

于是为了弄明白，找了一下相关资料，现总结如下：

1.介绍

pug 是一种前端模板引擎，原名 jade，可用来生成 HTML，它的写法类似于 CSS。

使用指南：入门指南 – Pug

解决的痛点：

1. HTML标签必须进行闭合，如果不闭合的话容易报错。
2. HTML没有模板机制，如果不使用前端框架维护起来非常困难。
3. 易理解，极大的简约了我们的代码。

2.安装

2.1下载

npm i -D pug pug-html-loader pug-plain-loader
或者
yarn add pug pug-html-loader pug-plain-loader

2.2vue.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” 

<template lang="pug">
    div.hello
        h1 Hello World
</template>