摘要

單一檔案元件 (Single-File Component, SFC) 是一種特殊的檔案格式（副檔名為 .vue），它允許我們在同一個檔案中，將元件的 HTML (<template>)、JavaScript (<script>) 和 CSS (<style>) 完美地組織在一起。

定義與說明

一個 .vue 檔案通常由三個部分組成：

<template>：

包含元件的 HTML 結構。

<script>：

包含元件的邏輯，如資料、方法等。使用 setup 屬性可以啟用更簡潔的組合式 API 語法。

<style>：

包含元件的樣式。加上 scoped 屬性可以讓樣式只作用於當前元件，避免污染全域樣式。

實作範例

Greeting.vue

<template>
  <p class="greeting">{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';
const message = ref('這是一個單一檔案元件！');
</script>

<style scoped>
.greeting {
  color: green;
  font-weight: bold;
}
</style>

結論

單一檔案元件是 Vue 開發體驗的核心。它提供了無與倫比的程式碼組織方式，讓功能相關的程式碼高度內聚，極大地提升了開發效率和專案的可維護性。

SFC 單一檔案元件組織方式