Vue 3 单文件组件（SFC）由 <template>、<script setup> 和 <style scoped> 三部分构成，支持响应式数据、局部样式及自动注册；在父组件中导入后可直接以 <HelloWorld /> 形式使用，推荐 PascalCase 命名并配合 defineProps/defineEmits 实现通信。
Vue 3 创建和使用单文件组件（SFC）非常直接：新建一个 .vue 文件，写好 <template>、<script> 和 <style> 三部分，再在父组件中导入并注册，就能用。
怎么创建一个 .vue 文件
在项目 src/components/ 目录下新建文件，比如 HelloWorld.vue，内容结构如下：
-
<template>写 HTML 模板，支持 Vue 指令（如{{ }}、v-if、@click） -
<script setup>是推荐写法，直接定义响应式数据（ref、reactive）、函数、生命周期钩子（onMounted），无需return -
<style scoped>中的样式默认只作用于当前组件，避免污染全局；去掉scoped就是全局样式
示例（HelloWorld.vue）：
<h2>Hello {{ name }}</h2>
<button @click="count++">点击 {{ count }} 次</button>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const name = ref('Vue 3')
const count = ref(0)
onMounted(() => console.log('已挂载'))
</script>
<style scoped>
h2 { color: #42b883; }
</style>
怎么在别的组件里使用它
以 App.vue 为例，分三步：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 在
<script setup>中用import引入组件，例如：import HelloWorld from './components/HelloWorld.vue' - 组件会自动注册（
script setup下无需手动声明components选项） - 在
<template>中像原生标签一样使用，如：<HelloWorld />（注意大小写和闭合）
两种脚本写法的区别
Vue 3 支持两种 <script> 形式，选一种即可：
-
<script setup>：语法糖，更简洁。所有顶层变量、函数、导入都自动暴露给模板，适合新项目和大多数场景 -
选项式 API（
export default { }）：沿用 Vue 2 风格，把data、methods、mounted等按类型组织，适合习惯旧写法或需要明确结构的团队
注意事项
实际开发中容易忽略但关键的点：
- 组件名建议用 PascalCase（如
MyButton.vue），模板中可写成<MyButton>或<my-button>（HTML 不区分大小写，推荐后者） - 如果子组件需要接收数据，用
defineProps声明 props；需要向父组件传值，用defineEmits - 不要在
<script setup>外部写逻辑，也不要在<template>里直接调用未声明的变量 - Vite 项目下，.vue 文件开箱即用，无需额外配置；如果是纯 HTML 引入 Vue CDN，则不支持 SFC，需改用 JavaScript 对象形式定义组件
