preface

Why puG? What’s so special about PUG? For some deeply nested pages, nesting may occur, as shown in the following figure:

In later maintenance and modification, accidentally missing an Angle bracket, or the start and close of a tag do not correspond, resulting in DOM structure confusion or even errors. So, someone invented HAML, which features indentation instead of paired tags. Inspired by HAML, Pug implements javascript.

Pug was originally not called Pug, is the famous Jade, later due to trademark reasons, changed to Pug, Pug. In fact, just change the name, the syntax is the same as Jade. To be fair, Pug has its own downsides — poor portability, difficult debugging, and not great performance — but using it can speed up development. This article introduces the Pug template engine in detail.

Vue using relation

Install Pug and its loader using the command line

NPM I -d pug pug-html-loader pug-plain-loader or YARN add pug pug-html-loader pug-plain-loaderCopy the code

Cli2.0 scaffolding to modify the build/webpack. Base. Conf. Js file

module: {
  rules: [{test:/\.pug$/,
    loader: "pug-html-loader"
   },
   // Omit other rules]}Copy the code

Cli3.0 only need to modify the vue.config.js file

module.exports = {
  chainWebpack: config= > {
      config.module.rule('pug')
          .test(/\.pug$/)
          .use('pug-html-loader')
          .loader('pug-html-loader')
          .end()
  }
}
Copy the code

Template adds language type Settings

<template lang='pug' >Div. Box Content section</template>
Copy the code

practice

Let’s take some code from an actual project and modify it

The original code

<template>
    <div class="gallery">
        <div class="btn-group">
            <span>Select album:</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">Upload photos</Button>
        </div>
        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="loadMore" ref="waterfall"></vue-waterfall-easy>
    </div>
</template>
Copy the code

After the transformation of 12 lines of code into 9 lines, the label is completely simplified

<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") upload_photo vue-waterfall-easy(:imgsArr="imgsArr" @scrollReachBottom="loadMore") {{item.name}} Button(type="info") upload_photo vue-waterfall-easy(:imgsArr="imgsArr" @scrollreachBottom ="loadMore" ref="waterfall")</template>
Copy the code

The React with relation

You need to include the Babel plug-in so that your program recognizes Pug.

npm install --save-dev babel-plugin-transform-react-pug
Copy the code

Include the following Babel configuration in package.json (instead of.babelrc creating a file in the root directory). If you already have one, simply include the default and plug-in properties package.json in your existing Bable configuration

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

React will also be able to play Pug happily.

import React from "react"

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

Frequently asked Questions

If you run NPM start now you may get the following error

The module babel-plugin-transform-react-jsx could not be found

The missing babel-plugin-transform-react-jsx mentioned above

NPM install –save-dev babel-plugin-transform-react-jsx

After that, if you run the application, you will receive the following error.

Pug is an undefined no-undef

As the default reactJS [eslint-plugin-react][3], do the following from the eslint-plugin-react-pug documentation

First, NPM install eslint –save-dev

Then, NPM install eslint-plugin-react-pug –save-dev

Then modify eslintConfig in package.json (you can also use.eslintrc in the root directory).

"eslintConfig": { 
    "plugins": [ "react-pug"]."extends": [ "react-app"."plugin:react-pug/all"]}Copy the code

The NPM start

Html transfer relation

It’s always a bit slow and hard to get used to in the beginning or when translating old code manually, so I recommend a site that can convert Html to Pug.

Website: html2jade.org/

The official documentation

Next is the official website address, you can find more detailed configuration and usage in the official documentation.

Official website: www.pugjs.cn/api/getting…