单文件组件

@SFC

单文件组件 SFC

SFC：Single-File Components，每个文件都是一个组件

文件名后缀名为 .vue；采用大驼峰命名格式，如 HomeView.vue

将一个 Vue 组件的模板、逻辑与样式封装在单个文件；遵循：结构 - 样式 - 逻辑 "三分离" 原则

基于 SFC 开发的应用程序，称为单页面应用 SPA - Single Page Application；所有的业务都在一个页面内完成

可以参考 Vs Code 相关插件，定制模板 - 调整三个部分的前后顺序；如把 <script> 调整到前面

<template>
  //结构
</template>

<script>
  //逻辑
</script>

<style>
  //样式
</style>

Vue3 提供两种 API：选项式 Options API 和组合式 Composition API

选项式 Options API

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
    },
    mounted() {
    }
  }
</script>

组合式 Composition API

按需导入，并采用 setup 语法糖 - 推荐使用

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'

</script>

[] 创建组件文件，使用扩展支持的语法，快速生成基本的组件结构