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