解读Vue3工程里的文件夹

一、.vscode中的extensions.json展示vscode配置的插件

二、src源代码文件，也就是存放我们的工作成果

其中的main.ts

第一句，引入creatApp，创建应用，相当于造花盆

第二句，引入App组件，相当于花的根，以后写的.vue文件可以直接在App里引入

第三句，创建应用从根App开始并且挂载在id为app的容器里（容器在index.html里），相当于把花插在花盆里

其中的components，存放组件，相当于枝叶，里面也是存放.vue文件

三、env.d.ts很重要，不能删掉

如果vite/client处标红，有可能是目录中没有node_modules文件夹，也就是没有依赖，选中env.d.ts文件夹在集成终端中打开输入npm i 命令安装所有的依赖，安装完成后关掉vscode重新再打开即可

它能够让ts认识.jpg、.txt等等前端常用的文件

四、index.html入口文件，是Vue项目的初始页面，其中定义了页面的基本结构和引入必要的资源文件，以便启动Vue应用程序。

五、

package.json是用于描述项目的配置和依赖项的文件。它包含了项目的信息，例如项目名称、版本号、作者、许可证等，以及项目的依赖项和脚本命令。

package-lock.json是自动生成的文件，用于锁定项目依赖项的版本。它记录了每个依赖项的精确版本号，以确保在不同的环境下构建项目时使用的是相同的依赖版本。这可以避免由于依赖项版本差异而导致的不可预测的行为和构建问题。

当你使用npm install命令安装或更新依赖项时，package.json文件会被更新，同时会生成或更新package-lock.json文件。package-lock.json文件会确保在不同的开发环境中安装的依赖项是一致的，从而保证项目的可靠性和稳定性。

六、

这些文件夹是用来配置TypeScript编译器的设置的。

• tsconfig.app.json：这个文件夹是用来配置应用程序的TypeScript编译选项的。它指定了在编译Vue应用程序时应该使用的编译选项，例如模块解析、目标版本等。

• tsconfig.json：这个文件夹是项目的根目录下的配置文件，用来配置整个项目的TypeScript编译选项。它可以覆盖tsconfig.app.json中的选项，并且还可以配置其他与项目相关的选项。

• tsconfig.node.json：这个文件夹是用来配置Node.js环境下的TypeScript编译选项的。它指定了在编译与Node.js相关的代码时应该使用的编译选项，例如模块解析、目标版本等。

七、vite.config.ts整个工程的配置文件，可以安装插件、配置代理等等

八、

在集成终端中输入 npm run dev 开始运行，按住ctrl输入c可以停掉脚手架