单文件组件 ​

介绍 ​

Vue.py 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue.py 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例：

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

<script lang='py'>
from vuepy import ref
greeting = ref('Hello World!')
</script>

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

如你所见，Vue.py 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template>、<script> 和 <style> 三个块在同一个文件中封装、组合了组件的视图、逻辑和样式。完整的语法定义可以查阅 SFC 语法说明。

为什么要使用 SFC ​

使用 SFC 带来了以下优点：

• 使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
• 让本来就强相关的关注点自然内聚
• 组件作用域的 CSS
• 在使用组合式 API 时语法更简单
• 通过交叉分析模板和逻辑代码能进行更多编译时优化
• 更好的 IDE 支持，提供自动补全和对模板中表达式的类型检查

SFC 是 Vue.py 框架提供的一个功能，并且在下列场景中都是官方推荐的项目组织方式：

• 单页面应用 (SPA)
• 静态站点生成 (SSG)
• 任何值得引入构建步骤以获得更好的开发体验 (DX) 的项目

当然，在一些轻量级场景下使用 SFC 会显得有些杀鸡用牛刀。因此 Vue.py 同样也可以在无构建步骤的情况下以纯 Python 方式使用。

SFC 是如何工作的 ​

Vue.py SFC 是一个框架指定的文件格式，因此必须交由编译器编译为标准的 Python 和 CSS，一个编译后的 SFC 是一个标准的 Python 类，这也意味着你通过 import_sfc 像导入模块一样导入 SFC：

from vuepy import import_sfc

MyComponent = import_sfc('./MyComponent.vue')

在实际项目中，我们一般会使用集成了 SFC 编译器的构建工具，Vue.py 官方也提供了脚手架工具来帮助你尽可能快速地上手开发 SFC。更多细节请查看 SFC 工具链章节。

如何看待关注点分离？ ​

在现代的 UI 开发中，我们发现与其将代码库划分为三个巨大的层，相互交织在一起，不如将它们划分为松散耦合的组件，再按需组合起来。在一个组件中，其模板、逻辑和样式本就是有内在联系的、是耦合的，将它们放在一起，实际上使组件更有内聚性和可维护性。

即使你不喜欢单文件组件这样的形式而仍然选择拆分单独的 Python 和 CSS 文件也没关系。