元件 SFC 寫法

在 Vue 3 的 SFC(Single-File Component，副檔名為 .vue) 語法當中，我們一般會寫以下的程式，也就是有三個區域：

<script>
</script>

<template>
</template>

<style>
</style>

在 template 標籤當中呢，就是元件的樣版，也就是要寫 html，例如：

<template>
  <div class="block">
    <h1 class="title">這是內容標題</h1>
  </div>
</template>

但其實我比較喜歡用 pug 語法，因為不想寫太多標籤的角括號，所以如果有用 pug 語法的話，上面的原始碼，就可以改寫成：

<template lang="pug">
div.block
  h1.title 這是內容標題
</template>

這邊要留意的是 div.block 左邊不可以縮排，如果縮排的話，會報錯。

所以今天呢，就要來將原來的 App.vue 檔當中的 template ，改成使用 pug 語法。

安裝 pug 套件

在專案資料夾中(我的話是 webmix_efficiency 資料夾)，執行以下指令：

npm install pug --save-dev

然後就可以在元件檔當中，使用 pug 的語法了，要記得在 template 標籤上，加 lang 屬性，指定 pug，例：

<template lang="pug">
</template>

更改 App.vue

更改 src 資料夾中的 App.vue 檔案，將原來的 template 標籤，改成以下的 pug 語法：

<template lang="pug">
header.header
  div.inner_header
    div.left
      h1 Efficiency
      p 有效率的建立您的品牌官網
    div.right
      form(action="#" method="#" class="login_form")
        div.input_group
          label 帳號
          input(type="text")
        div.input_group
          label 密碼
          input(type="password")
        div.input_group
          label
          button(type="button") 登入
  div.waves_block
    svg(class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto")
      defs
        path(id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z")
      g(class="parallax")
        use(xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7)")
        use(xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)")
        use(xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)")
        use(xlink:href="#gentle-wave" x="48" y="7" fill="#fff")
footer.footer
  p Copyright © 2022
</template>

有沒有覺得簡潔多了呢，少了很多角括號，看起來就是乾淨。

結語

現在很少在寫傳統的 html 標籤，所以如果 html 已經熟悉基本寫法及觀念之後，不論您的技術堆疊是什麼，將 html 導入 pug 語法是個不錯的選擇。