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

使用

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

改造实践

原代码：

<template>
  <div v-for="item in list" :key="item.id">
    <el-row class="job-list">
      <el-col :span="10" :offset="1">{{ item.name }}</el-col>
      <el-col :span="10" :offset="1">{{ item.name }}</el-col>
      <el-col :span="4">
        <i class="el-icon-close" @click="handleClick(item)" />
      </el-col>
    </el-row>
  </div>
</template>

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

<template lang='pug'>
  div(v-for="item in list" :key="item.id")
    el-row.job-list
      el-col.job-item(:span="10" :offset="1") {{ item.name }}
      el-col.job-item(:span="10" :offset="1") {{ item.sex }}
      el-col.job-item(:span="4") 
        i.el-icon-close(@click="handleClick(item)")
</template>

语法

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