2、Vue 3 （2024 版）基础笔记 - 了解 Vue 3 项目目录结构

项目已经安装并成功运行，现在，来了解一个相关目录及文件的含义。

注意：我后续使用了 pnpm 进行创建项目，差别不大。

$ tree learn-vue3/

learn-vue3/
├── env.d.ts # 义环境变量类型的 TypeScript 声明文件
├── index.html # 项目的主 HTML 文件，也就项目入口文件
├── node_modules # 存放项目依赖的 Node.js 模块
├── package.json # 信息描述文件
├── pnpm-lock.yaml # 使用 pnpm 包管理器时生成的锁定文件
├── public # 存放静态资源的目录
├── README.md # 项目自述文件，
├── src # 源代码目录
│   ├── App.vue # 应用的主组件，通常作为 Vue 实例的根组件
│   ├── assets # 存放静态资源的目录，如样式文件、图片、字体等
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css 
│   ├── components # 组件目录
│   │   ├── HelloWorld.vue
│   │   ├── icons
│   │   │   ├── IconCommunity.vue
│   │   │   ├── IconDocumentation.vue
│   │   │   ├── IconEcosystem.vue
│   │   │   ├── IconSupport.vue
│   │   │   └── IconTooling.vue
│   │   ├── TheWelcome.vue
│   │   └── WelcomeItem.vue
│   └── main.ts
├── tsconfig.app.json # 针对应用的 TypeScript 编译配置文件，用于指定编译应用源码时的选项和规则
├── tsconfig.json # 项目级别的 TypeScript 配置文件
├── tsconfig.node.json # 针对 Node.js 环境的 TypeScript 编译配置文件，用于编译与 Node.js 相关的 TypeScript 代码
└── vite.config.ts # Vite 构建工具的配置文件，用于定义项目构建、开发服务器等相关的配置项，如模块解析规则、插件配置、构建目标等