Vue3官网-工具（十八）单文件组件、（SFC）、测试（Jest）、移动端

Vue3官网-工具（十八）单文件组件、（SFC）、测试（Jest）、移动端

总结：

1. 单文件组件

介绍

Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中。下面是 SFC 示例：

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

<template>
  <p class="greeting">{
  { greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

正如所见，Vue SFC 是经典的 HTML、CSS 与 JavaScript 三个经典组合的自然延伸。每个 *.vue 文件由三种类型的顶层代码块组成：<template>、<script> 与 <style>：

• <script> 部分是一个标准的 JavaScript 模块。它应该导出一个 Vue 组件定义作为其默认导出。
• <template> 部分定义了组件的模板。
• <style> 部分定义了与此组件关联的 CSS。

查阅 SFC 语法规范 查看更多细节。

工作原理

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 或 Vue CLI（基于 webpack）等构