前言
蘑菇头他历经磨难入职了一家独角兽公司，当他去到公司里面，项目组长丢给他一个已经开发了两年半的项目，蘑菇头一头雾水，压根不知道如何处理这个烫手山芋，代码又臭又长，一个组件上千行代码，一个变量找半天，万一还有魔法值那就更难受了。如果你和我一样在为如何看好前端项目而苦恼，欢迎食用本篇文章。
第一步 看readme和项目开发文档
首先看这个项目的readme和项目开发文档。一般正规大型的项目是会经历非常严格的流程的，所以必定会有项目开发文档的，技术栈用到了什么技术，用vue写的还是React写的，vue2还是vue3，用的什么状态管理库，什么构建工具的，开发环境是什么，node是什么版本，这对你将来跑起这个项目来是非常重要的，项目的架构是什么样的，各个组件的功能他们是如何进行交互的，代码的一些规范，比如包的命名方式，git提交格式等等，api文档也是非常重要的，可以了解各个接口的功能。这个项目有什么样的功能，具体是做什么的，然后你作为前端的职责是什么？在开发文档里面应该都有比较清楚的记录。所以当你拿到这个项目的第一时间应该是问你的项目组长有没有项目的开发文档，当你要到了开发文档，你看这个项目将会如鱼得水，能够减轻很大的阅读压力。
其次看这个项目的readme文件，一般项目都会有。readme一般会记录这个项目是做什么的，有哪些功能，他会列出这个项目的主要特点和亮点功能或者一些页面的截图等等，最重要的是，里面大概率会有这个项目的启动过程，需要安装什么样的环境一般就靠他了，所以阅读项目的readme是非常重要的。
第二步 看项目的package.json
项目的package.json是整个项目的配置文件，里面记载了项目用到了哪些js包，一般看完这个文件之后就知道这个项目用的技术栈是什么了，用的什么组件库，用的什么状态管理库等等。
第三步 看项目的目录结构
在启动项目之前，我们可以看看项目的目录结构，看看这些目录都是做什么用的。一般我们常见的有utils用来放工具函数，components用来放可复用性组件，store存放状态管理相关的代码等等，不同的项目目录名字可能不同，作用都大差不差，点开来看一下就知道具体是用来做什么的。
第四步 启动项目
通过看readme我们可以启动这个项目，不出意外的话就要出意外了，项目启动不起来，一堆报错。一般这个时候是你的本地环境有问题，git拉取下来的代码一般是没什么问题的，这个时候你应该根据报错来更改你的开发环境，如果还解决不了，那就找你的leader，问问他是怎么启动起来的。
第五步 看路由文件夹下的index.js
当你启动起来之后，在页面上一顿操作，看了一些前端的ui界面，其实你对这个项目还不是特别理解，这个时候我们应该深入这个项目了。
路由文件夹能够快速帮助你理解了解到项目的页面结构、导航逻辑和路由配置等重要信息，是否有动态路由参数，例如 /user/:id，是否有路由重定向，有没有用到前置路由或者后置路由，错误是怎么处理的，是否有专门的404页面处理未找到的路由。是否使用了懒加载（代码分割），将不同的页面或模块按需加载，以提高初始加载速度。
第六步 看请求是如何封装的
一般项目为了提高复用性让代码更加的优雅都会对Ajax请求进行封装，了解公司是如何封装请求对于我们前端编写相应的接口是非常重要的，这样可以统一代码风格。请求是怎么配置的，有没有做请求拦截或者响应拦截等等。想要快速了解一般可以参考已经封装好的接口，一般放在api文件夹下，看看他们是怎么写的接口。
第七步 把登录流程走一遍
把登录流程走一遍可以知道整个登录流程是什么样的，登录凭证是怎么维护的，具体放在哪里，如果是放在localstorage或者cookie下，可以本地登录在浏览器调试控制台的应用程序看看。这样我们对于整个用户的登录权限就有一个大概的了解。
第八步 对自己感兴趣的功能或者组件详细展开看看
对于一些复杂的功能或者组件可以详细的展开看看，可以通过在浏览器安装插件vue devtools或者其他插件能够帮助开发者更高效地理解和调试 Vue 应用程序，对于代码长度过长的组件可以通过按住Ctrl键加f 来全局搜索关键词来帮助你快速定位。
结语
好了，今天蘑菇头的分享就到这里了，如果对您有帮助欢迎点赞关注收藏三连哦