Vue 3单文件组件由、、三个固定顺序、互不嵌套的区块组成，分别定义模板结构、响应式逻辑和局部样式，实现视图、行为、样式的高内聚自治封装。
Vue 3 中的单文件组件（SFC）标准基本结构由三个必需且互不重叠的语言块组成，全部封装在一个 .vue 文件中：
-
<template></template>：定义组件的 HTML 模板结构，支持 Vue 模板语法（如{{ }}插值、v-if、v-for等指令），必须有且仅有一个根元素（虽 Vue 3 支持多根，但官方推荐单根以保障样式和逻辑稳定性）； -
<script setup></script>：使用 Composition API 的响应式逻辑层，直接声明变量、函数、生命周期钩子等，无需export default，脚本内容在编译时自动封装为组件逻辑； -
<style scoped></style>：定义组件专属 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 分散在多个文件的做法。
