Pug模板化引擎，让你的代码减少15%

前言

为什么要引入pug，pug有什么特别之处呢？有一些嵌套层次较深的页面，可能会出现巢状嵌套，如下图所示：

在后期维护和修改时，一不小心少了一个尖括号，或者某个标签的开始和闭合没有对应上，就会导致DOM结构的混乱甚至是错误。所以，有人发明了HAML，它最大的特色就是使用缩进排列来代替成对标签。受HAML的启发，Pug进行了javascript的实现。

Pug原名不叫Pug，是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。其实只是换个名字，语法都与jade一样。丑话说在前面，Pug有它本身的缺点——可移植性差，调试困难，性能并不出色，但使用它可以加快开发效率。本文将详细介绍Pug模板引擎。

Vue使用Pug

使用命令行安装Pug和他的loader

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

cli2.0脚手架修改build/webpack.base.conf.js文件

module: {
  rules: [
   {
    test:/\.pug$/,
    loader: "pug-html-loader"
   },
   // 省略其他规则
  ]
 }

cli3.0只要修改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.box 内容部分
</template>

实践

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

原代码

<template>
    <div class="gallery">
        <div class="btn-group">
            <span>选择相册：</span>
            <Select v-model="cataId" style="width:200px">
                <Option v-for="item in catalogs" :value="item.id" :key="item.id" clearable>{{ item.name }}</Option>
            </Select>
            <Button type="info">上传照片</Button>
        </div>
        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="loadMore" ref="waterfall"></vue-waterfall-easy>
    </div>
</template>

改造后 12行代码变成9行，标签完全简化

<template lang="pug">
    .gallery
        .btn-group
            span 选择相册:
            Select(v-model="cataId" style="width:200px")
                Option(v-for="item in catalogs" :value="item.id" :key="item.id" clearable) {{ item.name }}
            Button(type="info") 上传照片
        vue-waterfall-easy(:imgsArr="imgsArr" @scrollReachBottom="loadMore" ref="waterfall")
</template>

React使用Pug

您需要包含babel 插件，以便程序识别Pug。

npm install --save-dev babel-plugin-transform-react-pug

在package.json（而不是.babelrc在根目录中创建文件）中包含以下 babel 配置。如果你已经有一个，只需在现有的 bable 配置中包含预设和插件属性package.json

"babel": {  
    "presets": [ "react-app" ], 
    //already included "plugins": [ "transform-react-pug", "transform-react-jsx" ]  
},

然后React也可以愉快的玩Pug啦.

import React from "react"

class App extends React.Component {  
    render() {    
        return pug`      
            div        
                h1 My Component        
                    p This is my component using pug.`;  
    }
}

常见的问题

如果你现在运行 npm start 你可能会得到以下错误

找不到模块“babel-plugin-transform-react-jsx

上面提到的缺少 babel-plugin-transform-react-jsx

安装它： npm install --save-dev babel-plugin-transform-react-jsx

之后，如果您运行该应用程序，您将收到以下错误。

Pug是未定义的 no-undef

作为默认使用的 reactjs [eslint-plugin-react][3]，请从 eslint-plugin-react-pug文档中执行以下操作

首先， npm install eslint --save-dev

然后， npm install eslint-plugin-react-pug --save-dev

接着在package.json修改eslintConfig. （您也可以.eslintrc在根目录中使用）

"eslintConfig": { 
    "plugins": [ "react-pug"], 
    "extends": [ "react-app", "plugin:react-pug/all" ] 
}

最后 npm start

Html转Pug

在使用初期或在手动转译老代码时候我们总是觉得有点慢和难以适应，下面我给大家推荐一个可以把Html转换成Pug的网站。

网站地址：html2jade.org/

官方文档

接下来是官网地址，大家可以在官方文档查询到更详细的配置与用法。

官网地址：www.pugjs.cn/api/getting…