我发现了一个很好的开源项目，有很多东西值得我借鉴，但是好像有点茫然，不知道如何学习。

这里我学习的开源项目链接：

honghuangdc/soybean-admin: soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript. 基于Vite + Vue3 + NaiveUI + TypeScript的漂亮清新的中后台管理模版 (github.com)

找不到对应代码——寻找相关文档

首先遇到的第一个问题就是找不到……

我现在想看这个项目的水平导航栏的布局和关于放大样式的调整

开始我找到我想要的代码是一个一个按照自己认为的关系去找的，然后就陷入了局部，根本就找不到真正的地方。

后来突然意识到：

** 所有开源项目基本上都有文档**

于是，我就去看了文档，看见了关键词布局

于是，我按照文档去找，一下子就找到了地方

一般情况下，开源项目都配有相关的文档，方便使用者理解，一定要记得用起来.

如果不根据文档从上至下把握整个系统，就很容易陷入局部，无法自拔。

一般情况下，我们都是从表面去理解相关的代码和业务的逻辑，这种情况我们当然可以从接口的角度去寻找调用接口的地方，但是如果需要找样式相关的时候，或许官方文档是一个不错的选择

报错——搜索对应文字

现在我学习开源项目，一个字一个字的抄过来的，但是现在好像报错了

报错提示：

$loadingBar不存在在类型Window或者globalThis中

于是，我直接搜索对应的关键字$loadingBar

找到了出错的地方了，我没有对Window类型添加类型

模仿样式——一层一层修改

有时候，我们可能会对开源项目的一些样式和适配性感兴趣，但是苦于不知道怎么去模仿。
比如说，现在我需要模仿这个开源项目的样式是去模拟头部布局

之前我的做法是按照层级去改动代码，这样修改出来的样式往往都不是我想要的

后来，突然灵机一动，为什么我不尝试直接在浏览器中抄呢？
开源项目样式

我直接点击按照层次结构直接修改DOM树上的样式，这样模（抄）仿（袭）的效率就很高

• 首先，浏览器会自动提示
  

• 其次，浏览器中修改会直接显示

当然需要一级一级往下改，而且没改完一层就需要复制到代码中去！

最好是一层层改，然后一层层代码去复制，不然到最后，有些样式可能就会被落下！！

理清业务逻辑——敢于删！！

一个开源项目往往是非常庞大、复杂的，我们可能对其中的很多点感兴趣，但是好像有点无从下手的感觉。我的建议是直接删！！
例如，当前开源项目，我想弄清它是如何实现动态路由的，于是我开始从main.ts中开始寻找，逐渐深入
发现了一个很长代码逻辑的地方，开始不断删删删

删到await时，我发现整个页面崩溃了，便继续深入看内部的代码逻辑

其实这和我们解决问题一样，有时候很多代码逻辑堆叠在一起，我们想要找出BUG就比较困难，不断的减少代码，确定每个部分是否真正可用，最后找到位置后，解决即可。

千万不要怕玩坏，因为这会让你心生畏惧，无法成长！