簡介

SFC 是 Vue 提供的一種文件格式(*.vue)，更多介紹可以看我的筆記，以下會詳細的介紹 SFC 會使用的各個語法。

Language Block

template

• 每個 SFC 最多只能擁有一個 tpo level 的 template
• 寫在 template 中的模板都會被提出來傳給 @vue/compiler-dom 來做編譯，會編譯成 js 的渲染函式。

script

• 每個 SFC 最多只能擁有一個 script 區塊 (script setup 則不在此限)
• 裡面的程式會以 ES Module 的方式執行
• 使用 export default 匯出必須是 Vue component options object，必需是一個 plain object 或是 defineComponent 的回傳值 (不是很理解這裡說的 options object 是什麼，在猜測會不會是指元件)

script setup

• 每個 SFC 最多只能擁有一個 script setup 區塊 (script 則不在此限)
• 裡面的程式會預先處理，並包裝成元件的 setup() 函式，這代表說這個元件的每個實例都會執行。 script setup 中的頂層綁定都會自動暴露給 template (最後這句看不太懂?)。更多可以參考 script setup

style

• 一個 *.vue 檔可以有很多個 style 區塊
• style tag 可以使用 scoped 或是 module (查看 SFC CSS Features 來了解更多)來幫助封裝當前元件的 css，不同的 style 可以使用不同的 tag，並可以同時在同一個 SFC 中混用。

custom block

你也可以自定義區塊，以下是一些很常用到的自訂義區塊:

• Gridsome: <page-query>
• vite-plugin-vue-gql: <gql>
• vue-i18n: <i18n>

如果你想撰寫自定義區塊，請參考這裡

[註] GraphQL

自動參考名稱

SFC 在以下情況會自動把檔案名稱當作元件名稱:

• 開發中的警告訊息需要格式化元件名稱時
• DevTools inspection
• 自己引用自己

預處理器

可以使用 lang 屬性來宣告你要使用的預處理器

<script lang="ts">
  // use TypeScript
</script>

<template lang="pug">
p {{ msg }}
</template>

<style lang="scss">
  $primary-color: #333;
  body {
    color: $primary-color;
  }
</style>

注意根據你使用的開發工具不同可能會有各個預處理器支援程度不同的情況，記得查看工具的文件

src import

如果你比較喜歡把檔案拆開來的寫法，你可以使用 src 屬性來 import 你的檔案。

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

比較要注意的是 src 的規則與 webpack 的規則相同，相對路徑要用./作為起始路徑，同時你也可以 import npm 的資源進來。

<!-- import a file from the installed "todomvc-app-css" npm package -->
<style src="todomvc-app-css/index.css" />

<unit-test src="./unit-test.js">
</unit-test>

註解

你可以在對應的區塊使用他們自己的註解方式，例如 template 中就使用 html 的註解方式。