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%