快速了解一个新的前端项目

转载
作者：拿我格子衫来
原创地址：https://blog.csdn.net/github_35631540/article/details/113880272

1. 快速浏览项目目录结构
2. 首页登陆流程，快速了解项目数据流转
3. 查看package.json文件，快速了解项目技术栈
4. 查看vue.config.js文件，快速了解API请求地址
5. 查看router文件夹，思考怎么增加菜单和页面？
6. 查看request文件夹，快速了解接口请求和响应拦截以及错误信息统一提示
7. 查看component文件夹，快速了解项目的公共组件，代码复用
8. 查看store文件夹，快速了解项目全局变量
9. 查阅项目基础文档，快速了解项目代码规范，测试环境部署等

项目架构每个目录的作用

目前的前端项目大部分都是使用@vue/cli或vue cli脚手架来生成的，所有目录一般都会大同小异。 但也有一些例外，比如我之前接触的lasam这个项目，使用nuxt.js脚手架搭建，刚接触时真是让我苦恼了几个小时。

梳理数据流转

数据流转指的是用户页面上的表单数据是创建的，获取表单数据后，调用了什么方法，做了什么验证，拦截，调用的那个http库发起的xhr请求，以及如何后端返回值的统一拦截，这是从用户到服务端的数据流转。还有就是从服务器获取数据渲染到用户页面上这个流程，期间也会调用很多方法。大多数项目都会封装一个http请求的统一处理方法。

那么熟悉这一块有什么用处那？http请求几乎是每个功能需求都需要用到的，将表单数据提交到服务端，从服务端查询数据显示到页面上。是再平常不过的功能。如果你不了解这个数据是怎么流转的，数据如何从一个方法到另一个方法的，对数据做了那些处理，那么你在做功能时会就会遇到很多问题。

如果遇到了使用vuex，或者Mobx，redux，dva，React Hooks， 这种状态管理库，一时间看不明白，最好的办法是对照着官方一起看,然后自己在模仿着现有的功能做一个增删改查。

package.json中的内容

package.json 这个文件里面显示了当前项目使用了那些js包，看了这个文件的内容就知道是什么技术栈了，以及使用技术。 一些用的多的核心包要多去查询文档，走在前面。 不要等到用到的时候再去学，比如用到了很多vue-class-component插件，那就vue-class-component文档刷起来。

Vue.config.js中的内容

这个文件里面显示了当前项目请求接口的跨域代理地址，网关鉴权，以及webpack的相关配置，思考怎么直连后端本地调试接口？怎么走网关联调？大型企业一般都会涉及到网关，如果没有可以省略这步

路由的映射，跳转

路由的调整，路由的映射，这部分也是比较重要的，但基本上，路由库就那么官方的几个，稍微看一下就能了解其用法，vue-router， React-Router。这部分不算难。需要注意的是路由守卫，拦截，这部分代码，还有菜单的配置。如果分配给你一个功能，很有可能需要配置一个新的菜单。有时候你明明按照现有的路由配置了一个新的路由，但就是无法显示在菜单里，这个时候就要通读一下有关路由逻辑处理的代码了。

request 文件夹

这个文件里面封装了全局的axios实例的方法，包括请求和响应拦截统一处理

component公共组件

在开始一个任务之前最好了解项目中有哪些公共组件了，避免重复造轮子，和前辈们写的不一致。能够省下不少时间。

查阅项目文档

一般成型的团队都有一些沉淀的文档，像代码约定，规范，提交规范。多读两遍。

根据URL快速找到对应的组件

这个技能是必备，而且收益最快的，试想一下，你刚入职二天，领导让你改一个页面的bug，bug上指定了是那个页面，路径也给你了，这个时候就需要你更加url快速定位到问题所在的组件。有时路由是一层套一层， 组件也是一层套一层。
那么如何快速找到想要的组件那？ 简单的办法是使用程序员超神技能 全局搜索
在vscode中 CTRL + SHIFT + F 即可打开全局搜索框。搜索关键词一点要找一些有特别的，越独特越好，最好全局唯一。 此外有些做了国际化的项目，直接搜页面的字段只能搜到国际化配置文件，这个时候就要再用配置文件做第二次搜索了。可以限制一些搜索文件。比如在 .vue 中搜索。

记录文档

刚开始接触项目时，需要在短时间里掌握很多知识，这些知识可能当时是理解了，或者当时不理解。 而这些得到的知识点，或者疑惑点，尽量都要记录下来。以备查阅。在学习rancher-ui这个项目的时候， 文字记录这个习惯确实帮了我很多。而且这些东西沉淀起来，以后可以教导新人，这样一做绩效就上去了，也树立了在新人中的高大的形象。