EP45 - 單檔組件
Single-File Components，接下來六篇是要講解Scaling Up的東西
Scaling Up意思應該是擴大規模、增加規模，
意思應該是要更加解釋組件吧？繼續來看下去
介紹 - Introduction
Vue 單文件元件（也稱為 *.vue 文件，簡稱 SFC）是一種特殊的文件格式，允許我們將 Vue 元件的模板、邏輯和樣式封裝在一個文件中。以下是一個 SFC 的範例：
<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>
如我們所見，Vue SFC 是 HTML、CSS 和 JavaScript 經典三重奏的自然延伸。<template>、<script> 和 <style> 區塊將元件的視圖、邏輯和樣式封裝並放置在同一文件中。完整的語法在 SFC 語法規範中定義。
為什麼使用 SFC - Why SFC
雖然 SFC 需要建置步驟，但它帶來了許多好處：
- 使用熟悉的 HTML、CSS 和 JavaScript 語法撰寫模組化元件
- 將本質上緊密耦合的關注點集中在一起
- 預編譯模板，無需運行時編譯成本
- 元件範圍內的 CSS
- 使用 Composition API 時更加舒適的語法
- 通過交叉分析模板和腳本進行更多編譯時優化
- 支援自動完成和模板表達式的類型檢查的 IDE 支援
- 開箱即用的熱模塊替換（HMR）支援
SFC 是 Vue 作為框架的一個定義特性，並且是以下情況下使用 Vue 的推薦方法：
- 單頁應用程式（SPA）
- 靜態網站生成（SSG）
- 任何需要建置步驟以提升開發體驗（DX）的非簡單前端專案
話雖如此，我們也意識到有些情況下使用 SFC 可能顯得過於繁瑣。這就是為什麼 Vue 仍然可以通過純 JavaScript 使用，而無需建置步驟。如果你只是想為主要是靜態的 HTML 增強一些輕量級的互動，可以查看 petite-vue，這是一個優化為漸進增強的 6 kB 的 Vue 子集。
運作方式 - How It Works
Vue SFC 是一種框架特定的文件格式，必須由 @vue/compiler-sfc 預編譯為標準 JavaScript 和 CSS。編譯後的 SFC 是一個標準的 JavaScript (ES) 模組，這意味著在適當的建置設定下，你可以像匯入模組一樣匯入 SFC：
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}
SFC 內的 <style> 標籤在開發過程中通常會被注入為原生的 <style> 標籤，以支援熱更新。對於生產環境，它們可以被提取並合併為一個單一的 CSS 文件。
你可以在 Vue SFC Playground 上嘗試 SFC，並探索它們的編譯過程。
在實際專案中，我們通常將 SFC 編譯器與建置工具（如 Vite 或基於 webpack 的 Vue CLI）集成。Vue 提供了官方的鷹架工具，讓你能夠最快速地開始使用 SFC。更多詳情請查看 SFC 工具部分。
關於關注點分離？ - What About Separation of Concerns?
一些來自傳統網頁開發背景的使用者可能會擔心，SFC 將不同的關注點混合在同一個地方，而 HTML/CSS/JS 本應該是分離的！
要回答這個問題，重要的是我們需要同意關注點分離並不等同於文件類型的分離。工程原則的最終目標是提高代碼庫的可維護性。在當前越來越複雜的前端應用中，關注點分離如果僅僅是基於文件類型的分離，並不能幫助我們達到這個目標。
在現代 UI 開發中，我們發現，與其將代碼庫分為三個相互交織的巨大層次，將它們分成鬆散耦合的組件並進行組合更有意義。在一個組件內，它的模板、邏輯和樣式是內在耦合的，將它們放在一起實際上使組件更加內聚和可維護。
即使你不喜歡單文件組件的概念，你仍然可以通過使用 Src Imports 將 JavaScript 和 CSS 分離到不同的文件中，利用其熱加載和預編譯功能。
看完這篇覺得還有蠻多要學習的www
Vite, Vue CLI這兩個工具應該是很實用的！！！
- Vite：是一個現代前端建置工具，專為提升開發速度和效率而設計。它支援熱模組替換（HMR, Hot Module Replacement），讓開發者在編輯代碼時立即看到變更結果。
- Vue CLI：Vue CLI 是基於 webpack 的 Vue.js 專案腳手架工具，它提供了一個完整的開發環境和建置設置，方便開發者快速啟動和管理 Vue.js 專案。
你可能也想看
