目录解析

通过目录分析，我们可以知道项目的功能代码都有哪些。某种程度上来说，一个好的项目，他的目录是很清晰的。你很容易找到组件代码应该在哪，配置代码会在哪，常量在哪等。也从侧面反映了，目录的命名也很关键。一个好的目录组织，可以极大的改善代码的可读性。

今天，我们来看下有哪些目录。

根目录

先看下根目录有哪些内容

├── CHANGELOG.md      // 更新日志
├── Dockerfile        // docker部署文件
├── apps
├── index.html        // 初始化挂载的基础html
├── mock              // mock数据
├── nginx.conf        // nginx的配置
├── node_modules      // 依赖项
├── package.json      // 依赖文件
├── packages          // 模块
├── pnpm-workspace.yaml  // pnpm的配置
├── public            // 资源文件
├── src                // 核心代码
├── tsconfig.json      // ts配置
├── turbo.json         // menorepo配置
├── types              // 类型
└── vite.config.ts     // vite的配置

通过根目录的配置，有些内容通过文件的命名就知道干什么用了，但是有些内容暂时只能靠猜测，比如apps，packages两个目录，对于不知道的先不着急，我们先看大概。

通过上面的分析，我们就知道解析来我们有几条线就很明确了。

分析配置和部署，看Dockerfile，index.html，vite.config，nginx.conf和package.json
分析menorepo，看pnpm-workspace.yaml和turbo.json
分析typescript，看tsconfig.json
分析业务看src

src

首先，看下 src 下面的内容

├── App.vue    // 跟组件
├── api        // api请求
├── assets     // 资源
├── components // 组件
├── design     // UI或者样式
├── directives // 指令
├── enums      // 枚举常量
├── hooks      // useHooks
├── layouts    // 布局相关的
├── locales    // 国际化相关的
├── logics 
├── main.ts    // 跟js文件
├── router     // 路由
├── settings   // 配置/设置 
├── store      // 数据状态
├── utils      // 工具库
└── views      // 页面

直观感受目录命令，我们也可以大概猜到每个文件夹是做什么作用的。对于有疑问的先放着，这步骤不着急。

目录分析到这个步骤就差不多结束了，其他的目录大家也可以打开看一下，有个直观的感受，这个阶段可以进入目录下的一两个文件简单浏览下，但是不要深入。

根目录​

src​

根目录

src