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 注释语法：<!-- 注释内容在此处 -->