一、什么是单文件组件（SFC）

类似于html格式的文件.vue文件，称为单文件组件(*.vue文件) Singgle-FIle Components 缩写为SFC

注意：

                每一个*.vue 主要由三层构成：<script> <template>  <style>

                每个*.vue 文件最多可以包含一个顶层 template 块

              每个*.vue 文件 最多包含一个 script 块

                每个*.vue 文件最多包含一个<script setup>

                每个*.vue 文件可以包含多个 style标签

单文件组件格式：

二、使用单文件组件SFC的优点

   1、使用熟悉的HTML、CSS和JavaScript 语法编写模块化组件

   2、使用组合式API时语法更简单

   3、让本来就强相关的关注点自然内聚

   4、预编译模版、避免运行时的编译开销

   5、组件作用域的css

   6、通过交叉分析模版和逻辑代码能运行更多编译时的优化

    需要使用SFC必须使用构建工具，Vite是Vue官方提供的Vue构建工具，内置了Vue项目脚手架，直接使用Vite 很方便构建Vue单页应用

三、Vite 介绍与Vite构建项目

Vite官网：https://cn.vitejs.dev/

vite 配置文件： https://cn.vitejs.dev

使用 npm init vue@latest 创建项目

浏览器打开，即可访问！