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 | #app |
這樣子就可以運行哩~
如果想更了解 PUG 可以看看 官方網站
但是使用 PUG 有一個很嚴重的缺點也就是必須做轉換,以 bootstrap 官方文件來講都是使用 HTML,如果是用 PUG 撰寫就必須使用 HTML to PUG 轉換器,所以這邊我附上我自己常用的轉換
HTML to PUG:https://html2jade.org/
PUG to HTML:https://pughtml.com/
在使用 PUG 的時候務必注意縮排,否則很容易出錯唷~