Pug的安装及使用

为什么使用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()

使用

改造实践

原代码：

Pug改造后，11行代码变成8行，标签完全简化：

语法

Pug和HTML最大的不同在于它拥有自己的语法，拥有循环、条件控制、定义变量等功能。可以说如果在没有前端框架的年代，这些功能是多么的有诱惑力，但是，近几年React、Vue的出现，已经解决了这些痛点，所以在这里就不一一介绍了，如果有需要可以在Pug官方文档上进行学习