在閱讀 Vue 官方文件的時候，會一直看到 SFC，那什麼是 SFC？
SFC 是 Single-File Component 的縮寫，也就是 Vue 專案中常見的 .vue 檔，是 Vue 的一大特色。
Vue SFC 檔案內可以封裝單一元件的：
<script>)<template>)<style>)直接來看看常見的 .vue 程式碼架構：
<script>
import { ref } from "vue";
export default {
setup() {
const greeting = ref("第六天而已，還好嗎？");
return {
greeting,
};
},
};
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>
前面提到 .vue 內一般會包含三個區塊(模板/邏輯/樣式)，先來看一下詳細的規定：
<template>
.vue 最多只能有一個 <template>
@vue/compiler-dom 預編譯成 JavaScript 的渲染函式<script>
.vue 最多只能有一個 <script> (不包含 <script setup> )defineComponent 的回傳值。<script setup>
.vue 最多只能有一個 <script setup> (不包含 <script> )setup() 函式使用<style>
.vue 可以有多個 <style>
scope 和 module 屬性可以選用，也可在 SFC 內混合使用介紹在語言塊 tag 中常用到的屬性：
langlang 屬性來表明使用的語言：<script lang="ts"></script>
<template lang="pug"></template>
<style lang="scss"></style>
scoped in <style><style> 標籤中可以使用 scoped，表示樣式只要套用在當前元件，不會影響到其他元件，能避免 style 互相影響。<style lang="scss" scoped></style>
setup in <script><script> + setup() 的寫法。<script setup></script>
除了以上三種類型的區塊(block)，SFC 檔內還可以使用自訂的 blocks，但就要在建構工具中特別設定，告訴 vite「專案有自定義 block」，告訴他如何處理，舉例一個實際插件如 @intlify/vite-plugin-vue-i18n，就有自訂 <i18n> block，讓開發者可以在裡面定義多國語系，使用文件。
.vue 檔會如何被解析murmur: 其實這件事對新手來說並不是很重要啦，但因為我很好奇。
瀏覽器並不認識 .vue 檔，在開發期間，我們不能像以前一樣直接透過 live server 在瀏覽器上預覽專案，這也是為什麼我們需要用到 Vite 或 Vue Cli 等建構工具，建構工具會根據 Vue 提供的 loader - @vue/compiler-sfc 來編譯 .vue 檔。
所以 .vue 檔是怎麼被解析編譯的？
可能跟你想的不太一樣。
(至少跟我一開始想的不太一樣啦，我一開始以為他會把每個 哈哈哈哈哈(用笑聲掩飾尷尬)).vue 檔的 <template> 剪下來接在一起
SFC 中 <script> 和 <template> 的內容會被編譯成渲染函式，每次要用到該元件或頁面時，就會呼叫這個渲染函式。（這也是為什麼我們可以在元件中 import 其他 .vue 檔，因為每個 .vue 檔最終都是一個 JavaScript 模組）
SFC 中 <style>的部份：
<style> tag 的方式掛載，以支援熱更新(hot update)。.css 檔案中，請參考 Day 4: 從 npm run build (vite build) 簡單認識打包。✓ 建構工具為 vite
✓ 啟動本地伺服器 (npm run dev)
✓ 使用預設設定，沒有特別做調整
讓我們打開瀏覽器來看看～
是不是看到很多熟悉的名字？
：欸，他後面明明就是 .vue？說好的不認識？
「雖然他還有 .vue，但你再仔細看看他，他已經是 .js 了。」
點擊檔案後，可以從右邊欄位看到 .vue 檔被編譯過的結果，像是最熟悉的陌生人，可以依稀看到當初的模樣。
在開發環境(development)，會用 <style> tag 的方式掛載 .vue 中的樣式，這件事會由一個 Javascript module 來處理，以支援熱更新(hot update)。
將開發者工具切回 Elements，<head> 內確實被插入多個 <style> tag，可以點開看看內容，基本上每個 SFC 檔都有對應的 <style> tag。
::::::warning::::::
注意是用 Vite 啟動本地開發環境(npm run dev) 時，才會看到類似上面的結果。
.vue 的方式是一樣的，但 Vue Cli 在開發期間就已經把所有檔案 bundle 在一起，所以沒辦法從瀏覽器看到單獨 vue 檔編譯後的樣子。npm run build (vite build) 和 preview 的結果，可以到 Day 4: 從 npm run build (vite build) 簡單認識打包 看看。明天會進一步說明 Vue 3 的語法糖 <script setup> ！
iThome鐵人賽
看影片追技術
看更多
