Pug 介绍和在 Vue 中使用

1 介绍

pug 是一种前端模板引擎，原名 jade

可用来生成 HTML，它的写法类似于 CSS

中文文档

这里先简单举几个 🌰

#hello
<div id="hello"></div>

a.link-button Link
<a class="link-button">Link</a>

a(href="https://xrkffgg.github.io/Knotes/") 我的网站
<a href="https://xrkffgg.github.io/Knotes/">我的网站</a>

易理解，同时极大的简约了我们的代码。

2 安装

2.1 下载

npm i -D pug pug-html-loader pug-plain-loader
# or
yarn add pug pug-html-loader pug-plain-loader

2.2 配置

// vue.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">
	div.hello
		h1 Hello World
</template>

3 实践

3.1 举例

下面将拿出实际项目中的一些代码进行改造

• 原代码

20 行，所有标签完全闭合

<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dept">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()">{
  { $t('add') }}</el-button>
        </el-form-item>
      </el