Vue单文件组件

封面图 • 2026-03-24 • Vue

Vue 单文件组件（Single File Component，简称 SFC）是 Vue.js 提供的一种开发方式，它将一个 Vue 组件的模板（template）、逻辑（script）和样式（style）都写在一个 `.vue` 文件中。这种方式使得组件的结构更加清晰、易于维护，并且可以更好地支持现代前端开发工具链。

---

## ✅ 一、Vue 单文件组件的基本结构

一个典型的 `.vue` 文件包含三个部分：

```vue
<template>
  
</template>

---

## ✅ 二、各部分的作用

### 1. `<template>` 标签
- 用于编写 Vue 组件的 HTML 模板。
- 使用 Vue 的模板语法（如 `{{ }}` 插值、`v-if`、`v-for` 等）。

示例：
```vue
<template>
  <div>{{ message }}</div>
</template>
```

---

### 2. `<script>` 标签
- 用于编写组件的逻辑，如数据、方法、生命周期钩子等。
- 使用 ES6+ 语法，例如 `export default` 导出组件对象。

示例：
```vue
<script>
export default {
  data() {
    return {
      message: 'Hello from script'
    }
  },
  methods: {
    greet() {
      alert(this.message)
    }
  }
}
</script>
```

---

### 3. `<style>` 标签
- 用于编写组件的样式。
- 可以使用 `scoped` 属性来限制样式只作用于当前组件。

示例：
```vue
<style scoped>
div {
  color: red;
}
</style>
```

---

## ✅ 三、优点

| 优点 | 说明 |
|------|------|
| 结构清晰 | 模板、逻辑、样式集中在一个文件中 |
| 易于维护 | 每个组件独立，方便管理 |
| 支持热更新 | 在开发时支持实时刷新 |
| 支持模块化 | 方便复用和测试 |

---

## ✅ 四、使用场景

- Vue 项目中推荐使用单文件组件进行开发。
- 常用于 Vue CLI、Vite、Nuxt.js 等项目中。

---

## ✅ 五、示例：完整单文件组件

```vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="greet">点击我</button>
  </div>
</template>

---

## ✅ 六、注意事项

- 单文件组件需要通过构建工具（如 Webpack、Vite）进行编译，不能直接在浏览器中运行。
- 如果你使用的是 Vue 2，SFC 的写法与 Vue 3 基本一致，但有些细节略有不同（如 `setup()` 和 Composition API）。

---

如果你正在使用 Vue 3，还可以使用 **Composition API** 来编写单文件组件，比如：

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

const message = ref('Hello from <script setup>')
</script>
```

---

如果你想了解如何在项目中使用单文件组件，或者想看具体项目的配置方式，也可以告诉我你的开发环境（如 Vue CLI、Vite、Nuxt.js），我可以提供更具体的指导。