Vue3_工程结构和单文件组件概念
目录结构解释
node_modules：前端框架依赖下载完，依赖文件所存储的目录
public：用于存放一些公共资源，如HTML文件，图像，字体等，这些资源会被直接复制到构建出的目标目录中
src/目录：存放项目的源代码，包括JavaScript，CSS，Vue组件，图像和字体等资源，在开发过程中，这些文件会被Vite实时编译和处理，并在浏览器中进行实时预览和调试，以下是src内部划分建议：
- assets/ 目录：用于存放一些项目中用到的静态资源，如图片，字体，样式文件等
- components/ 目录：用于存放组件相关的文件，组件是代码复用的一种方式，用于抽象出一个可复用的UI部件，方便在不同的场景中进行重复使用
- layouts 目录：用于存放布局组件的文件，布局组件通常负责整个应用程序的整体布局，如头部，底部，导航菜单等
- pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。
- plugins/ 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。
- router/ 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。
- store/ 目录：用于存放 Vuex 状态管理相关的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，提高开发效率。
- utils/ 目录：用于存放一些通用的工具函数，如日期处理函数、字符串操作函数等。
- vite.config.js文件：Vite的配置文件，可以通过该文件配置项目的参数，插件，打包优化等，该文件可以使用CommonJS或ES6模块的语法进行配置
- package.json文件：标准的Node.js项目配置文件，包含了项目的基本信息和依赖关系，其中可以通过scripts字段定义几个命令，如dev,build等，用于启动开发，构建和启动本地服务器等操作
- Vite项目的入口为
src/main.js文件，这是Vue.js应用程序的启动文件，也是整个前端应用程序的入口文件，在该文件中，通常会引入Vue.js及其相关插件和组件，同时会创建Vue实例，挂载到HTML页面上指定的DOM元素中
可以修改端口号，默认是5173
编辑vite.config.js
什么是.vue文件
我们可以把多个页面相同的部分，单独拿出来，作为一个构建网页的"组件"
传统的方式下：使用的是多文件组件
一个组件由.html文件，.css文件和.js文件，三个文件组成（多文件组成）
VUE3框架中，通过.vue文件来管理组件
vue将这些文件合并成一个.vue文件（Single-File Component，简称SFC，单文件组件）.vue文件对js/css/html统一封装，这是vue中的概念，该文件由三个部分组成<script>,<template>,<style>
template标签 代表组件的html部分代码 代替传统的.html文件 script标签 代表组件的js代码，代替传统的.js文件 style标签 代表组件的css样式代码 代替传统的.css文件