Vue3 新项目架构简单解析
Vue新项目解构：
由上至下：
.vscode：
项目缓存文件，不用动
node_modules：
Node.js自己下载的项目所需的依赖项，有这些依赖项才可以跑起来，使用npm install可以重新下载。
public：
静态资源，图片图标视频等
src：
根目录写代码的地方
src中包含一些样式、资源、界面和代码。
route/index.ts
路由配置文件
在这个配置文件中，你可以定义路由的映射关系、路径别名等配置项。在Vue项目中，我们需要将router的配置文件导入到项目中，以便使用其提供的路由功能。
以下为引用参考：
Vue Router简介及使用方法
1.1 ◇ Vue Router简介
Vue Router是Vue官方提供的模块切换插件，旨在帮助开发者实现单页面应用中的页面跳转功能。通过配置router，我们可以轻松地在Vue应用中实现不同模块之间的切换。为了方便后期查阅，接下来我们将详细记录router的使用过程和方法。
1.2 ◇ 使用方法与配置
为了使用Vue Router，你需要创建一个router的配置文件，其基本路径为：router/index.js。在这个配置文件中，你可以定义路由的映射关系、路径别名等配置项。在Vue项目中，我们需要将router的配置文件导入到项目中，以便使用其提供的路由功能。
index.html
是程序入口
index.html中：
其中<script>
-
src="/src/main.ts"：指定 Vue 应用的入口文件 -
这是整个应用的启动脚本
main.js:
main.js负责初始化Vue应用实例、加载全局配置、注册全局组件、引入插件以及挂载Vue实例到DOM上。main.ts中代码把App.vue和index.html中的<div id="app"></div>做了绑定(关联到App.vue组件)，所以运行界面都是在index.html中的<div id="app"></div>中。
整个界面都显示在<div id="app"></div>
.Vue文件就是界面或者组件。
启动时执行顺序:index.html->main.js->app.vue->index.js->HelloWorld.vue。
package.json：
主要包括项目依赖(devDependencies)项和运行脚本(scripts)
devDependencies：比如创建项目的时候选择的一些typescript和eslint依赖和对应的版本，引入新插件这里会有变化；
scripts：这个项目启动的脚本，其中的dev对应 npm run dev中的dev，其中build作用是为了生成可以在服务器中运行的环境，也可以使用npm run build生成测试，其他都有对应含义，感兴趣可以自行了解；
tsconfig.json :
是 TypeScript 编译器的配置文件，用于指定 TypeScript 项目的编译选项和编译过程中需要引用的文件。
vite.config.ts :
是 Vite 的配置文件。Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。
引用（不分先后）：
https://blog.csdn.net/wangshiqi666/article/details/129779702?fromshare=blogdetail&sharetype=blogdetail&sharerId=129779702&sharerefer=PC&sharesource=qq_59062726&sharefrom=from_link
https://baijiahao.baidu.com/s?id=1839127544950459452&wfr=spider&for=pc
https://blog.csdn.net/qq_42941302/article/details/115857640?fromshare=blogdetail&sharetype=blogdetail&sharerId=115857640&sharerefer=PC&sharesource=qq_59062726&sharefrom=from_link