原文地址 https://www.aiprose.com/blog/126

1 介紹
pug 是一種前端模板引擎，原名 jade

可用來生成 HTML，它的寫法類似于 CSS

這里先簡單舉幾個例子

#hello <div id="hello"></div> a.link-button Link <a class="link-button">Link</a>

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

2 安裝
2.1 下載

npm i -D pug pug-html-loader pug-plain-loader 或者 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 使用，注意要加 lang=“pug”

<template lang="pug">div.helloh1 Hello World </template>

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

原代碼

<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-groupspan 選擇相冊: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>

總結

以上是生活随笔為你收集整理的Vue 中使用Pug的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。