前言

本次终于写到了第五章了，前面四章节，我们从一个全新的 umi3 的ant design pro 模板开始着手，我们以一个初始者要用它的思想介入，逐步走了新增路由、cssmodules、国际化语言切换、使用mock数据进行快速开发、联调正式接口、初始化配置、登录修改、接口文件提取等等。这次到第五章了，我们暂时不做新的改变，我们来把之前写的一些杂项收拾收拾，比如，清除一些不需要的代码，规范一些东西，让我们的项目成为我们的快速开发模板。

我们要删除一些什么？

架构里有句话是这样说的，不过于设计，所以我们清楚当前模板里的一些用不到的东西，来还原一个基本的样子出来，让我们的项目目录更加的健硕，并且我们再次重新熟悉下当前的项目目录。

1. 项目目录

这个是我们目前的项目目录

我们要精简一个清晰的项目快速开发模板，那么有一些不用的，脚手架自行拉取的我们要清楚。

2. 精简pages

src/pages 是我们的项目的页面主要显示，所以我们第一站就是清理它。从上图中显示，pages目录下目前拥有home(我们自己加的)、TableList（默认带）、user（默认带），这三个页面，其中home页面是我们自己新增用来写的测试页面，table是官方模板中的演示页面，user则为官方模板中的登录页面。除过文件夹之外，我们在这里还有。404页面，Admin管理员页面，document.ejs（刷新时候占用loading），Welcome，我们的欢迎主页等。

其中，home，Table对我们来说都是可以删除的，因为一个是我们新增的一个是官方的演示页面。

同时我们也可以删除Admin页面，毕竟在自己的项目中也没有一个页面就Admin，其余的就是我们需要修改Welcome页面，以及修改document.ejs loading 刷新页面为我们自己的。

精简之后的pages文件夹如上。

大家要注意的是，在删除完之后，记得把路由也修改了哦，否则会报错的。

3.精简 locales

精简完页面之后，我们需要精简下locales 也就是国际化文件。

我们打开项目登录后查看右上角语言切换按钮。

大家会发现，我们的项目支持的国际化也太多了，但是我们目前是一个精简版的初始化模板，本来说放着也没啥，但是放着就意味着我们每个展示的地方都需要去一个个的重新定义这八种不一样的语言展示，所以很明显这里不符合我们的需求。

并且，我们目前也没法确定，到底是项目在哪个国家上线。所以我们想取消其它语言，默认只留下简体中文与英文即可。

其它语言怎么办呢？一个字删！

那么删了后报错怎么办，我们是不是跟删除页面时候一样还需要删除配置这些展示地方的东西呢？

答案是：否！

来跟我看看怎么回事？

我们先打开项目的 src/components/RightContent 这个文件夹，在里面可以看到index.tsx，它就是顶部导航栏展示的一些列的展示组件。

在这个tsx 文件中我们可以看到有搜索，有疑问查询（默认打开的是git的项目地址），有头像，有语言切换。

这里我们只说下语言切换。大家可以仔细看看

在tsx中，有个组件叫SelectLang

它就是用来渲染国际化语言的组件，我们要删除就得找它。

如果同学们使用的是vscode的话可以按住 ctrl + 鼠标左键进入这个组件。

点了之后是这样的，我们双击箭头的这个区域即可打开这个文件。

打开后我们清晰的可以看到这个组件的定义规则及方式，以及传入参数等，在这个tsx中，的顶部我们可以看到这个页面是放置在 .umi 这个文件夹中的。

.umi 这个文件夹，其实是每次我们运行 npm start 后 项目根据当前依赖重新生成的一个包，这里面都是一些我们使用了Umi后的组件。如：layout组件，model，request，antd-icon等包都在这里。

并且细心的同学发现了，这个顶部的地址中还有一个 叫 defaultLangUConfigMap的变量，通过这个变量defaultLangUConfigMap 的名字我们可以清楚的知道，这个变量就是默认的语言切换配置值，也就是页面上我们正在找的语言的这个列表的值。

是不是很高兴大家，赶紧全局搜一下看看它是在哪里用的。

全局搜索完后发现，它在这里，并且发现它只是一个被用值，也就是说，是有人告诉他，我有某个值，这时候这个 defaultLangUConfigMap 中的某个值才会赋值过去。这个叫它的人就是 getAllLocales() 这个方法。并且看名字可以清晰的看到，它就是获取所有语言的一个方法，并且这个方法返回的是一个 list。

我们继续 ctrl + 鼠标左键进去这个方法，进去后直接入眼的就是一句话，获取语言列表

并且getAllLocales 这个方法其实就是 localeInfo。

我们往上翻找到localeInfo。

很明显，如上图：红圈为这个数组，而黄圈的变量则为上述从文件中引入。这个文件就是 src/locales/下的一个个语言文件。

所以我们只需要删除 src/locales/下不需要的语言文件，其实默认的页面上也就找不到这些文件，然后不会显示了。

这里大家要知道的是.umi文件夹是每次保存/npm start 后都会自动重新拉取加载哦，所以上述黄圈里面如果没有这个文件，则对应的不会引入。

我们试试看。删除不需要的语言文件，只留下中文跟英文。

当我们删除后，再次进入网站查看

它对应的就只剩下我们留的这两个文件。

而我们刚才查看的 getAllLocales() 这个方法的文件

4. 精简搜索

在页面顶部的搜索还遇到问题，就是当我们点击搜索按钮后，它会默认有这些数据存在。

这里其实很简单，我们刚才在找语言切换的时候也发现了，其实在语言切换那个tsx 中就直接了当的写着呢，我们删除了就行。

好了结束！

5. 精简页面疑问。

也就是页面上的这个东东。我们每次一点它都自己打开了新的页面。不是我们想要的，要修改也很容易，就这当前页面中，直接删除就行。

6 头像展示

有心的朋友发现了，头像展示这块一直在转圈，转圈的意思就是在加载，头像没出来。那我们肯定得收拾一下子。

我们先在components /RightContent / AvatarDropdown.tsx 文件中找到头像代码

你会发现，这里取的到头像的变量为 avatar. 前面的currentUser 大家肯定很眼熟把。之前课堂有说过。大家找上去会发现就是初始化的时候我们定义的全局属性 initialState 。它在任意组件中都可以使用。所以这里我们的头像取的肯定是 登陆后初始化数据的 用户基本信息。

打开F12 查看接口请求返回的参数。

发现头像的值确实是 avatar 没错啊。咋回事。

别急我们再看看代码。

往上翻代码的时候看到一个loading 判断。

出于好奇的我屏蔽了下红圈内的loading，果然不加载了！

那么问题就是这，大家看这个判断值。它判断的是 当用户信息没有 或者 用户名没有的时候就一直 loading。

那我们看下接口

会发现，其实我们的接口返回值，也就是我们保存的用户信息里，没有 name 这个变量。所以它才会进入加载。

我们修改name为 nickName 。

这下头像就正常显示出来了

总结

以上就是今天要说的内容，对项目进行精简，大概比较难的部分我都改完了，剩下基本简单的地方就伙伴们自行动手吧。正所谓眼过千遍不如手写一遍，剩下的还有像菜单底部的 两个链接取消 以及项目底部的展示要修改 最后还有项目左上角的LOGO 同时还有刷新页面时候的 loading 加载的名字。 好了，今天就到这里，祝各位伙伴开发顺利哦。有问题留言即可！