SFC 語法規範 ​

概覽 ​

Vue 單檔案元件（SFC），傳統上使用 *.vue 副檔名，是一種使用類似 HTML 語法來描述 Vue 元件的定製檔案格式。Vue SFC 在語法上與 HTML 相容。

每個 *.vue 檔案由三種頂級語言塊組成：<template>、<script> 和 <style>，以及可選的額外自定義塊

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

語言塊 ​

<template> ​

• 每個 *.vue 檔案可以包含最多一個頂級 <template> 塊。

• 內容將被提取並傳遞給 @vue/compiler-dom，預編譯成 JavaScript 渲染函式，並附加到匯出的元件的 render 選項。

<script> ​

• 每個 *.vue 檔案可以包含最多一個 <script> 塊（不包括 <script setup>）。

• 指令碼作為 ES 模組執行。

• 預設匯出 應該是一個 Vue 元件選項物件，可以是普通物件，也可以是 defineComponent 的返回值。

<script setup> ​

• 每個 *.vue 檔案可以包含最多一個 <script setup> 塊（不包括正常 <script>）。

• 指令碼將被預處理器處理，並用作元件的 setup() 函式，這意味著它將在每個元件例項上執行。在 <script setup> 中的頂級繫結會自動暴露到模板中。有關更多詳細資訊，請參閱 關於 <script setup> 的專用文件。

<style> ​

• 單個 *.vue 檔案可以包含多個 <style> 標籤。

• <style> 標籤可以具有 scoped 或 module 屬性（更多詳細資訊請參閱 SFC 樣式功能），以幫助將樣式封裝到當前元件。可以在同一組件中混合不同封裝模式的多個 <style> 標籤。

自定義塊 ​

可以為任何專案特定需求在 *.vue 檔案中包含額外的自定義塊，例如一個 <docs> 塊。一些自定義塊的實際例子包括

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

自定義塊的處理將取決於工具 - 如果您想構建自己的自定義塊整合，請參閱 SFC 自定義塊整合工具部分 以獲取更多詳細資訊。

自動命名推斷 ​

在以下情況下，SFC 會自動從其 檔名 推斷元件的名稱

• 開發警告格式化
• DevTools 檢查
• 遞迴自引用，例如，名為 FooBar.vue 的檔案可以將其模板中的自身引用為 <FooBar/>。這比顯式註冊/匯入的元件優先順序低。

預處理器 ​

可以使用 lang 屬性宣告預處理器語言。最常見的情況是使用 TypeScript 對 <script> 塊進行操作

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

lang 可以應用於任何塊 - 例如，我們可以使用 <style> 與 Sass 以及 <template> 與 Pug

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

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

注意，與各種預處理器整合可能因工具鏈而異。請檢視相應的文件以獲取示例

• Vite
• Vue CLI
• webpack + vue-loader

src 匯入 ​

如果您希望將 *.vue 元件拆分成多個檔案，您可以使用 src 屬性為語言塊匯入外部檔案

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

請注意，src 匯入遵循與 webpack 模組請求相同的路徑解析規則，這意味著

• 相對路徑需要以 ./ 開頭
• 您可以匯入來自 npm 依賴的資源

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

src 匯入也與自定義塊一起工作，例如

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

<img src="~some-npm-package/foo.png">

註釋 ​

在各個塊內，應使用所使用的語言的註釋語法（HTML、CSS、JavaScript、Pug 等）。對於頂級註釋，請使用 HTML 註釋語法：<!-- 註釋內容在此處 -->