Pug 介绍和在 Vue 中使用
生活随笔
收集整理的這篇文章主要介紹了
Pug 介绍和在 Vue 中使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 介紹
pug 是一種前端模板引擎,原名 jade
可用來生成 HTML,它的寫法類似于 CSS
中文文檔
這里先簡單舉幾個 🌰
#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>易理解,同時極大的簡約了我們的代碼。
2 安裝
2.1 下載
npm i -D pug pug-html-loader pug-plain-loader # or yarn add pug pug-html-loader pug-plain-loader2.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.helloh1 Hello World </template>3 實踐
3.1 舉例
下面將拿出實際項目中的一些代碼進行改造
- 原代碼
20 行,所有標簽完全閉合
<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 行,標簽完全簡化
<template lang="pug">el-card.aui-card--fill(shadow="never").mod-sys__deptel-form(:inline="true" :model="dataForm" @keyup.enter.native="getDataList()")el-form-itemel-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 注釋
- 單行
- 不輸出注釋
- 塊注釋
4.4 符號
- 管道文字( | ):向模板添加純文本
- # [ ] 標簽嵌入
- .
- : 塊展開
- / 自閉和標簽
5 后 記
感謝支持。
若不足之處,歡迎大家指出,共勉。
如果覺得不錯,記得 點贊,謝謝大家 ?💖?
歡迎關注。
- GitHub
- 掘 金
- 簡 書
5.1 原文地址
https://xrkffgg.github.io/Knotes/blog/15.html
總結
以上是生活随笔為你收集整理的Pug 介绍和在 Vue 中使用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: juc的辅助类
- 下一篇: 学习Vue3 第七章(认识Reactiv