Vue 出一個女友吧!-PUG Template

前言

PUG Template 是我非常愛用的 HTML Template,所以講一下該如何使用在 Vue 中撰寫 PUG 吧

起手式

如果想在 Vue 中使用 PUG,那就一定要安裝 vue-cli-plugin-pug 套件,否則你無法編譯

1
npm install --save-dev vue-cli-plugin-pug

撰寫方法

如果有安裝 vue-cli-plugin-pug 套件,其實就大致上都準備完畢了,也不用修改 main.js,我們直接打開 App.vue 教你怎麼寫

首先撰寫之前要將第一行 <template> 改成 <template lang="pug">,然後將原本的內容替換成以下

1
2
3
4
5
6
7
8
9
10
11
12
#app
#nav
router-link(to='/') Home
| |
router-link(to='/about') About
.card(style='width: 18rem;')
.card-body
h5.card-title Card title
p.card-text
| Some quick example text to build on the card title and make up the bulk of the card's content.
a.btn.btn-primary(href='#') Go somewhere
router-view

這樣子就可以運行哩~

成功運行

如果想更了解 PUG 可以看看 官方網站

但是使用 PUG 有一個很嚴重的缺點也就是必須做轉換,以 bootstrap 官方文件來講都是使用 HTML,如果是用 PUG 撰寫就必須使用 HTML to PUG 轉換器,所以這邊我附上我自己常用的轉換

HTML to PUG:https://html2jade.org/

PUG to HTML:https://pughtml.com/

在使用 PUG 的時候務必注意縮排,否則很容易出錯唷~

0%