Vue 3单文件组件由、、三个固定顺序、互不嵌套的区块组成，分别定义模板结构、响应式逻辑和局部样式，实现视图、行为、样式的高内聚自治封装。

Vue 3 中的单文件组件（SFC）标准基本结构由三个必需且互不重叠的语言块组成，全部封装在一个 .vue 文件中：

• ：定义组件的 HTML 模板结构，支持 Vue 模板语法（如 {{ }} 插值、v-if、v-for 等指令），必须有且仅有一个根元素（虽 Vue 3 支持多根，但官方推荐单根以保障样式和逻辑稳定性）；
• <script setup></script>：使用 Composition API 的响应式逻辑层，直接声明变量、函数、生命周期钩子等，无需 export default，脚本内容在编译时自动封装为组件逻辑；
• ：定义组件专属 CSS 样式，scoped 属性确保样式仅作用于当前组件内元素，避免全局污染。

这三个区块顺序固定、不可嵌套，彼此隔离又协同工作。例如：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

<template><div class="greeting">{{ message }}</div>
</template><script setup>
const message = 'Hello Vue 3!'
</script><style scoped>
.greeting {
  color: #42b883;
  font-weight: bold;
}
</style>

这种结构把一个组件的视图、行为、样式真正聚合成一个自治单元，替代了传统开发中 HTML/JS/CSS 分散在多个文件的做法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！