Pug is introduced and used in Vue

1 introduction

Pug is a front-end templating engine, formerly known as JADE

It can be used to generate HTML, which is written like CSS

Chinese document

Here are a few simple examples 🌰

#hello
<div id="hello"></div>
Copy the code

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

A (href = "https://xrkffgg.github.io/Knotes/") my web site<a href="https://xrkffgg.github.io/Knotes/">My website</a>
Copy the code

Easy to understand and greatly simplified our code.

2 the installation

2.1 download

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

2.2 configuration

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

2.3 the use of

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

3 the practice

For example, 3.1

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

• The original code

20 lines, all tags completely closed

<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-form> <el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;" > <el-table-column prop="name" :label="$t('dept.name')" header-align="center" min-width="150"></el-table-column> <el-table-column prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center"></el-table-column> <el-table-column prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80"></el-table-column> <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150"> <template slot-scope="scope"> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> </template> </el-table-column> </el-table> </div> </el-card> </template>Copy the code

• After transforming

13 lines, completely simplified labels

<template lang="pug">
  el-card.aui-card--fill(shadow="never")
    .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-table(v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;" )el-table-column(prop="name" :label= "$t('dept.name')" header-align="center" min-width= "150")el-table-column(prop="parentName" :label= "$t('dept.parentName')" header-align="center" align="center")
        el-table-column(prop="sort" :label= "$t('dept.sort')" header-align="center" align="center" width= "80")el-table-column(:label= "$t('handle')" fixed="right" header-align="center" align="center" width= "150")template(slot-scope="scope")
            el-button(type="text"
                      size="small"@click="addOrUpdateHandle(scope.row.id)") {{ $t('update') }}
            el-button(type="text"
                      size="small"@click="deleteHandle(scope.row.id)") {{ $t('delete') }}
</template>
Copy the code

El-button uses a branch because the attribute is too long

Four features

4.1 support

• supportVue 的 : @
• ES6 template strings are supported

4.2 attributes

If a label has multiple attributes, use lines or commas

/ / 1el-button(v-if="ifShow" type="size" size="small"@click="doClidkClick / / ")2
el-button(v-if="ifShow",type="size",size="small",@click="doClidk"Click on the / /3
el-button(v-if="ifShow"
          type="size"
  	  size="small"
  	  @click="doClick") clickCopy the code

4.3 annotations

• A single

// some content p foo p bar


<! -- Some content -->
<p>foo</p>
<p>bar</p>
Copy the code

• No comment output

//- this line will not appear in the result p foo p bar


<p>foo</p>
<p>bar</p>
Copy the code

• Block comments

Body // A bunch of text in progress


<body>
<! -- A bunch of text in progress -->
</body>
Copy the code

4.4 sign

• Pipe text (|) : Adds plain text to the template

P | pipe symbol is always in the beginning, | isn't in front of the indentation.


<p>The pipe symbol is always at the beginning, not counting the indentation.</p>
Copy the code

A... | with a link of the end of the sentence.


<a>... End a sentence with a link</a>.Copy the code

Never | | button press | | me!!!!!!!

Don't be<button>According to the</button>Me!!!!!!!Copy the code

• # []Tags embedded

P. It's a long, long, boring paragraph. It's not over yet. Yes, it's very, very long. Suddenly there was a #[strong] that was really hard to #[em] ignore. P. Example of using an attribute embedded tag: #[q(lang="es") ¡Hola Mundo!]


<p>It's a long, long, boring paragraph, and it's not over yet, yes, very, very long. Suddenly one appeared<strong>Words full of power</strong>It's really hard<em>ignore</em>.</p>
<p>Examples of using embedded tags with attributes:<q lang="es">¡ Hola Mundo!</q></p>
Copy the code

P | if I don't have embedded function to write, some labels such as strong strong | and em em | may produce unexpected results. P. If embedded, the Spaces next to #[strong strong] and #[em em] would make me much more comfortable.


<p>So if I don't write it with embedding, some tag like<strong>strong</strong>and<em>em</em>There may be unexpected results.</p>
<p>If embed is used, in<strong>strong</strong> 和 <em>em</em>The next space will make me feel much more comfortable.</p>
Copy the code

• .

// Large text blocks p. Using regular tags makes your lines shorter, but using embedded tags makes your code more #[em legible]. If your label is separated from the text by a space.


<p>Using regular tags makes your lines of code shorter and shorter, but using embedded tags makes your code even shorter<em>Clear and easy to read</em>. If your label is separated from the text by a space.</p>
Copy the code

Div p This text belongs to the paragraph tag. Br. This text belongs to the div tag.


<div>
  <p>This text belongs to the paragraph tag.</p><br/>This text belongs to the div tag.</div>
Copy the code

• :Block a

a: img


<a><img/></a>
Copy the code

• /Autism and labels

foo/
foo(bar='baz')/


<foo/>
<foo bar="baz" />
Copy the code

Remember after 5

Thank you for your support.

If insufficient, welcome to point out, mutual encouragement.

If you like it, give it a thumbs up and thank you ʚ💖ɞ

Welcome to follow.

• GitHub
• Dig gold
• Jane’s book

5.1 Original Address

XRKFFGG. Making. IO/Knotes/blog…