第二章：单文件组件 —— 一家店就是一个 `.vue` 文件

1 分钟 107 字第 72 / 962 个阅读单元

在 Vue 里，最典型的开发单位就是 单文件组件 SFC，也就是 *.vue 文件。

vue

<script setup lang="ts">
const name = 'Vue 书店'
</script>

<template>
  <section class="shop">
    <h2>{{ name }}</h2>
  </section>
</template>

<style scoped>
.shop {
  padding: 12px;
  border: 1px solid #ddd;
}
</style>

你可以把它理解成：

<template>：店铺长什么样
<script setup>：店铺怎么运转
<style>：店铺装修风格