Vue3 创建单文件组件(SFC)

关键要点

• 单文件组件（SFC）是 Vue3 中将模板、逻辑和样式封装在一个 .vue 文件中的格式。
• 研究表明，它适合大型项目，提高代码可读性和维护性。
• 创建 SFC 需要使用 Vue CLI 或 Vite 创建项目，然后编写 .vue 文件。
• 它支持 <script setup> 语法，简化组合式 API 的使用。

什么是单文件组件？

单文件组件（SFC）是一种特殊的文件格式，扩展名为 .vue，允许将一个 Vue 组件的 HTML 模板、JavaScript 逻辑和 CSS 样式封装在一个文件中。这种方式使得组件的代码更加模块化和易于管理。

如何创建？

1. 安装工具：使用 Vue CLI 或 Vite 创建 Vue3 项目，例如 vue create my-vue3-app。
2. 创建文件：在 src/components 下创建一个 .vue 文件，如 MyComponent.vue。
3. 编写内容：在文件中定义 <template>（模板）、<script>（逻辑）和 <style>（样式）。

使用示例

以下是一个简单的 SFC 示例：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

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

<style scoped>
.hello {
  color: red;
}
</style>

更多资源

详细内容请参考：Vue.js 官方文档 – 单文件组件 和 菜鸟教程 – Vue3 单文件组件。

---

详细报告

Vue3 的单文件组件（Single-File Component，SFC）是一种强大的功能，允许开发者将组件的模板、逻辑和样式封装在一个 .vue 文件中，从而提高代码的可读性、可维护性和组织性。以下是对 Vue3 创建单文件组件的全面讲解，涵盖定义、创建步骤、使用方式和注意事项。

背景与定义

单文件组件是 Vue 框架提供的一种文件格式，通常以 .vue 为扩展名。它包含三个主要部分：

• <template>：定义组件的 HTML 模板，用于渲染用户界面。
• <script>：定义组件的 JavaScript 逻辑，包括数据、方法、计算属性和生命周期钩子。
• <style>：定义组件的 CSS 样式，可以通过 scoped 属性限制样式作用域，仅影响当前组件。

这种格式通过构建工具（如 webpack 或 Vite）编译为浏览器可识别的 JavaScript 和 CSS，适合中大型项目的开发。对于轻量级场景，Vue 也支持纯 JavaScript 方式，但 SFC 是官方推荐的项目组织方式。

创建步骤

要创建单文件组件，首先需要一个 Vue3 项目。以下是详细步骤：

1. 安装开发工具：

• 使用 Vue CLI 创建项目：
  bash npm install -g @vue/cli vue create my-vue3-app
  在创建过程中，选择 Vue3 预设。
• 或者使用 Vite（Vue3 的默认构建工具）：
  bash npm create vite@latest my-vue3-app -- --template vue

1. 创建 SFC 文件：

• 在项目目录下，通常在 src/components 文件夹中，创建一个新的 .vue 文件，例如 MyComponent.vue。
• 文件内容可以参考以下结构： <template> <div> <h2>This is MyComponent</h2> </div> </template> <script> export default { name: 'MyComponent' } </script> <style scoped> h2 { color: blue; } </style>

1. 使用组合式 API（可选）：
   Vue3 引入了 <script setup> 语法，允许更简洁地编写组件逻辑，特别是当使用组合式 API 时。例如：

   <script setup>
   import { ref } from 'vue'

   const count = ref(0)
   </script>

   <template>
     <button @click="count++">Count is: {{ count }}</button>
   </template>

使用方式

要在项目中使用 SFC，需要导入并注册组件。以下是一个示例：

• 在 App.vue 或其他组件中导入和使用：

  <template>
    <div>
      <MyComponent />
    </div>
  </template>

  <script>
  import MyComponent from './components/MyComponent.vue'

  export default {
    components: {
      MyComponent
    }
  }
  </script>

对于 <script setup>，由于编译器会自动注册组件，无需手动导入和声明。

高级功能与注意事项

• 样式作用域：通过 scoped 属性，可以使 <style> 标签中的样式仅作用于当前组件，避免样式冲突。例如：

  <style scoped>
  .demo {
    color: green;
  }
  </style>

• 自定义块：除了 <template>、<script> 和 <style>，SFC 还支持自定义块，如文档或元数据。例如：

  <custom-block>
  This is a custom block for documentation.
  </custom-block>

• 预处理器支持：SFC 支持使用预处理器，如 Sass、Less 或 Stylus，只需在项目中配置相应的 loader。例如：

  <style lang="scss" scoped>
  .demo {
    color: $primary-color;
  }
  </style>

• 异步组件：SFC 支持懒加载，通过动态导入实现。例如：

  const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'))

对比与选择

与传统的 Options API 相比，SFC 结合组合式 API 提供了更好的代码组织和复用能力。以下是 Options API 和组合式 API 在 SFC 中的对比：

特性	Options API	组合式 API (