Vue 出一個女友吧!-PUG Template

發表於 2019-07-25 分類於 Vue

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

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">，然後將原本的內容替換成以下

#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 的時候務必注意縮排，否則很容易出錯唷~