单文件组件（SFC）是Vue.js核心组件单元，由template、script、style三部分构成，支持Options API与Composition API两种写法，可通过scoped实现样式局部化，并需通过导入、注册、挂载流程在App.vue中使用。
如果您是前端开发新手，首次接触 Vue.js 并希望快速理解其最核心的组件组织形式，则单文件组件（SFC）是必须掌握的基础单元。以下是零基础入门 SFC 的实操路径：
一、认识 SFC 的三块基石
SFC 本质是一个以 .vue 为扩展名的文本文件，它将组件所需的全部要素——结构、逻辑、样式——严格封装在三个不可分割的语言块中，避免跨文件跳转与作用域污染。
1、打开任意文本编辑器，新建一个文件，命名为 MyComponent.vue；
2、在文件顶部依次写入 <template> 标签，内部添加一个带插值的 div 元素，例如：<div>{{ message }}</div>；
立即学习“前端免费学习笔记（深入）”；
3、在 <template> 下方添加 <script> 标签，导出一个包含 data() 函数的对象，返回 { message: 'Hello SFC!' }；
4、在 <script> 下方添加 <style> 标签，内部写入 div { color: #2c3e50; font-size: 16px; }；
二、区分两种脚本写法
Vue 3 提供了 Options API 和 Composition API 两种逻辑组织方式，二者语法结构与响应式机制不同，但均被 SFC 完全支持，可按项目阶段选择使用。
1、若采用 Options API，<script> 块内必须使用 export default 导出对象，且 data 必须为返回对象的函数；
2、若采用 Composition API，需改用 <script setup> 标签，并在其中直接调用 ref() 或 reactive() 声明响应式变量；
3、在 <script setup> 中无需显式 return，所有顶层绑定的变量和函数默认暴露给模板；
4、两种写法不可混用于同一 <script> 块中，否则编译报错。
三、控制样式的生效范围
样式默认全局生效，可能意外覆盖其他组件；添加 scoped 属性后，CSS 选择器将被自动添加唯一属性标识，确保仅作用于当前组件 DOM。
1、将 <style> 修改为 <style scoped>；
2、保存文件后，检查浏览器开发者工具 Elements 面板，可见组件根元素上新增类似 data-v-f3f518dc 的属性；
3、对应 CSS 规则中类选择器（如 .my-class）已被重写为 .my-class[data-v-f3f518dc]；
4、手动删除 scoped 属性并刷新页面，观察样式是否扩散至其他同名类元素。
四、注册并使用自定义组件
单文件组件不能独立运行，必须被父组件导入、声明、挂载，才能渲染到页面中。这是 SFC 参与实际应用的必要环节。
1、在 src/components/ 目录下创建 MyComponent.vue 文件，并完成基础三块编写；
2、打开 App.vue，在 <script> 块顶部使用 import MyComponent from './components/MyComponent.vue'；
3、在 export default 对象的 components 选项中注册该组件：components: { MyComponent }；
4、在 <template> 中插入自定义标签：<MyComponent />。
五、验证组件是否正确加载
浏览器无法直接解析 .vue 文件，必须通过构建工具（如 Vite 或 Vue CLI）启动开发服务器，将 SFC 编译为浏览器可执行的 JavaScript 模块。
1、确保项目已通过 npm create vue@latest 初始化，并安装依赖；
2、执行 npm run dev 启动本地服务，默认地址为 http://localhost:5173；
3、打开浏览器访问该地址，检查页面是否显示 Hello SFC! 文本；
4、在开发者工具 Console 面板中输入 document.querySelector('div').textContent，确认返回值与组件 data 中定义一致。
