為什么使用pug

Pug，原名jade，是流行的HTML模板引擎，最大的特色是使用縮進排列替代成對標(biāo)簽，簡化了HTML的成對標(biāo)簽的寫法

優(yōu)勢：

代碼更加簡潔、極大提高開發(fā)效率

安裝及使用

安裝

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行，標(biāo)簽完全簡化：

<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最大的不同在于它擁有自己的語法，擁有循環(huán)、條件控制、定義變量等功能?？梢哉f如果在沒有前端框架的年代，這些功能是多么的有誘惑力，但是，近幾年React、Vue的出現(xiàn)，已經(jīng)解決了這些痛點，所以在這里就不一一介紹了，如果有需要可以在Pug官方文檔上進行學(xué)習(xí)