接着记录4学习，从记录4中我们了解到一个基本的使用Vue框架库构建的html简单页面例子，这节继续；

在Vue.js中，组件是构建用户界面的核心概念。

它可以将界面拆分为独立、可复用的模块，每个模块都有自己的结构、样式和行为，你可以将组件理解为一个自定义的HTML元素，它封装了特定的功能和UI，可以在应用中重复使用。

单文件组件SFC（Single File Component）

在Vue框架中的使用一个单独的文件编写的组件，允许开发者将 HTML、JavaScript 和 CSS 代码统一放在一个文件中编写，通常以 .vue 为文件后缀，构成的这样一个单独的文件作为Vue框架项目的一个组件，叫做单文件组件。

它以.vue作为文件扩展名，比如前面记录3构建基本项目时见到App.vue。

单文件组件是Vue.js项目中组织代码的核心方式，它将组件的模板、逻辑和样式封装在一个.vue文件中，提供了清晰的代码结构和高效的开发体验

单文件组件代表一个基本.vue文件，这个.vue文件通常包含三个部分：HTML，JavaScript，CSS

1）<template>部分：定义组件的 HTML 结构；

2）<script>部分：定义组件的逻辑（数据、方法等），对应JavaScript；

3）<style>部分：定义组件的样式，对应CSS；

比如构建一个通用的button组件的.vue文件：

<!-- HTML部分 -->
<template>
  <button @click="handleClick">{{ buttonText }}</button>
</template>

<!-- JavaScript部分 -->
<script>
export default {
  data() {
    return {
      buttonText: "点击我"
    };
  },
  methods: {
    handleClick() {
      alert("按钮被点击了！");
    }
  }
};
</script>

<!-- CSS部分 -->
<style scoped>
button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}
</style>

在Vue框架项目里构建编写的基本都是.vue文件，是Vue的基本文件组织形式，但是.vue文件不能直接在浏览器运行，需要Vue工具链来编译成浏览器可运行的JavaScript语言.js文件。

Vue库和其框架作用

Vue本身是一个js库，所以也可以直接<script>引入其到html文件里使用，比如记录4的使用实例

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>

核心库就是一些基本功能，用于简化DOM操作和数据绑定，用在视图层的操作，早期与其他js库类似

逐渐完善提供更多功能的支持，发展成了一个完整的Vue框架

单文件组件.vue就是Vue框架提供的一种开发者和框架理解方便编写和组织代码的格式，然后通过框架工具再转为通俗运行的js格式。

大家基本使用JavaScript构建页面都是用封装好相关功能的库嘛，比如jQuery等等，毕竟直接手撸JavaScript来渲染构建web页面也没必要或者麻烦，不要重复造轮子。

Vue框架的作用就在于此了，复杂的前端页面直接写在一个文件不太可能，通常是一个具体的项目包含多个文件，框架就是通过工具和生态扩展，帮助更加方便地组织构建页面逻辑的编写。