Vue3 是一种流行的 JavaScript 框架，它提供了创建单文件组件（Single File Components，SFC）的方式。单文件组件是一种将模板、脚本和样式封装在一个文件中的开发模式，可以提高代码的可读性和维护性。本文将详细介绍如何在 Vue3 中创建和使用单文件组件。
安装 Vue CLI
在开始之前，我们需要先安装 Vue CLI，它是一个用于快速搭建 Vue 项目的命令行工具。可以使用以下命令进行安装：
npm install -g @vue/cli
安装完成后，我们可以使用 vue --version 命令来验证 Vue CLI 是否成功安装。
创建项目
在安装完成 Vue CLI 之后，我们可以使用它来创建一个新的 Vue3 项目。打开终端并执行以下命令：
vue create my-project
然后，按照提示选择预设配置或手动配置项目。等待项目创建完成后，进入项目目录：
cd my-project
创建单文件组件
在 Vue3 项目中，我们可以使用 .vue 后缀的文件来创建单文件组件。每个单文件组件由三个部分组成：模板、脚本和样式。
模板
在单文件组件中，模板部分使用 HTML 语法编写，描述了组件的结构和布局。可以使用 Vue 的模板语法来绑定数据和处理事件。
<template>
<div>
<h1>{
{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
在上述代码中，我们使用双大括号语法 {
{}} 来绑定数据，并使用 @click 指令来监听按钮的点击事件。
脚本
脚本部分使用 JavaScript 编写，包含了组件的逻辑代码。可以通过 setup 函数来定义组件的状态、方法和生命周期钩子等。
<script>
import {
ref } from 'vue'
export default {
setup() {
const message = ref('Hello, Vue3!')
const increment = () => {
message.value += '!'
}
return {
message,
increment
}
}
}
</script>
在上述代码中，我们使用 ref 函数来创建一个响应式变量 message，并定义了一个名为 increment 的方法。
样式
样式部分使用 CSS 编写，用于设置组件的外观和样式。可以使用常规的 CSS 语法进行样式定义。
<style>
h1 {
color: blue;
}
button {
background-color: lightblue;
}
</style>
在上述代码中，我们使用 CSS 选择器来选中元素，并设置不同的样式。
在组件中使用单文件组件
创建完单文件组件后，我们可以在其他组件或页面中引入和使用它。首先，需要使用 import 语句导入单文件组件：
import MyComponent from './MyComponent.vue'
然后，在父组件的模板中使用自定义组件：
<template>
<div>
<h2>Parent Component</h2>
<my-component></my-component>
</div>
</template>
注意，我们将自定义组件名 my-component 作为标签名在模板中使用。
最后，在父组件的脚本中注册并使用自定义组件：
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}
</script>
通过 components 选项来注册并声明要使用的自定义组件。
总结
在本文中，我们详细介绍了如何在 Vue3 中创建和使用单文件组件。单文件组件可以将模板、脚本和样式封装在一个文件中，提高了代码的可读性和维护性。
我们学习了单文件组件的三个部分：模板、脚本和样式，并演示了如何在组件中引入和使用单文件组件。