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