Pug 介紹和在 Vue 中使用

時間 2020-01-09

標籤 pug 介紹 vue 使用简体版

原文原文鏈接

1 介紹

pug 是一種前端模板引擎，原名 jadehtml

可用來生成 HTML，它的寫法相似於 CSS前端

中文文檔vue

這裏先簡單舉幾個 🌰git

#hello
<div id="hello"></div>
複製代碼

a.link-button Link
<a class="link-button">Link</a>
複製代碼

a(href="https://xrkffgg.github.io/Knotes/") 個人網站
<a href="https://xrkffgg.github.io/Knotes/">個人網站</a>
複製代碼

易理解，同時極大的簡約了咱們的代碼。github

2 安裝

2.1 下載

npm i -D pug pug-html-loader pug-plain-loader
# or
yarn add pug pug-html-loader pug-plain-loader
複製代碼

2.2 配置

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module.rule('pug')
      .test(/\.pug$/)
      .use('pug-html-loader')
      .loader('pug-html-loader')
      .end()
  }
}
複製代碼

2.3 使用

<template lang="pug">
  div.hello
    h1 Hello World
</template>
複製代碼

3 實踐

3.1 舉例

下面將拿出實際項目中的一些代碼進行改造web

原代碼

20 行，全部標籤徹底閉合npm

<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>
複製代碼

改造後

13 行，標籤徹底簡化api

<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>
複製代碼

el-button 因爲屬性過長，使用了分行編輯器

4 特性

4.1 支持

支持 Vue 的 : @
支持 ES6 模板字符串

4.2 屬性

若是一個標籤有多個屬性，可以使用分行或逗號網站

// 1
el-button(v-if="ifShow" type="size" size="small" @click="doClidk") 點擊
// 2
el-button(v-if="ifShow",type="size",size="small",@click="doClidk") 點擊
// 3
el-button(v-if="ifShow"
          type="size"
  	  size="small"
  	  @click="doClick") 點擊
複製代碼

4.3 註釋

單行

// 一些內容
p foo
p bar

<!-- 一些內容 -->
<p>foo</p>
<p>bar</p>
複製代碼

不輸出註釋

//- 這行不會出如今結果中
p foo
p bar

<p>foo</p>
<p>bar</p>
複製代碼

塊註釋

body
  //
    一堆
    文字
    進行中

<body>
<!-- 一堆 文字 進行中 -->
</body>
複製代碼

4.4 符號

管道文字（ | ）：向模板添加純文本

p
  | 管道符號老是在最開頭，
  | 不算前面的縮進。

<p>管道符號老是在最開頭， 不算前面的縮進。
</p>
複製代碼

a ……用一個連接結束的句子
| 。

<a>……用一個連接結束的句子</a>。
複製代碼

| 千萬別
|
button 按
|
| 我！

千萬別
<button>按</button> 我！
複製代碼

# [ ] 標籤嵌入

p.
  這是一個很長很長並且還很無聊的段落，尚未結束，是的，很是很是地長。
  忽然出現了一個 #[strong 充滿力量感的單詞]，這確實讓人難以 #[em 忽視]。
p.
  使用帶屬性的嵌入標籤的例子：
  #[q(lang="es") ¡Hola Mundo!]

<p>這是一個很長很長並且還很無聊的段落，尚未結束，是的，很是很是地長。 忽然出現了一個 <strong>充滿力量感的單詞</strong>，這確實讓人難以 <em>忽視</em>。</p>
<p>使用帶屬性的嵌入標籤的例子：
  <q lang="es">¡Hola Mundo!</q></p>
複製代碼

p
  | 若是我不用嵌入功能來書寫，一些標籤好比
  strong strong
  | 和
  em em
  | 可能會產生意外的結果。
p.
  若是用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就會讓我舒服多了。

<p>若是我不用嵌入功能來書寫，一些標籤好比<strong>strong</strong>和<em>em</em>可能會產生意外的結果。</p>
<p>若是用了嵌入，在 <strong>strong</strong> 和 <em>em</em> 旁的空格就會讓我舒服多了。</p>
複製代碼

// 大文本塊
p.
  使用常規的標籤可讓您的代碼行短小精悍，
  但使用嵌入標籤會使代碼變得更 #[em 清晰易讀]。
  ——若是您的標籤和文本之間是用空格隔開的。

<p>使用常規的標籤可讓您的代碼行短小精悍， 但使用嵌入標籤會使代碼變得更 <em>清晰易讀</em>。 ——若是您的標籤和文本之間是用空格隔開的。
</p>
複製代碼

// 純文本塊
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>
複製代碼

: 塊展開

a: img

<a><img/></a>
複製代碼

/ 自閉和標籤

foo/
foo(bar='baz')/

<foo/>
<foo bar="baz" />
複製代碼

5 後記

感謝支持。

若不足之處，歡迎你們指出，共勉。

若是以爲不錯，記得點贊，謝謝你們 ʚ💖ɞ

歡迎關注。

5.1 原文地址

xrkffgg.github.io/Knotes/blog…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。