关于我：明月，从业前端开发，会Java，会前端，会产品，会测试，会大客户销售，有过职业规划经验，欢迎各位私信聊天。目标是创业实现上班自由。梦想明月天涯。
目录
接上章，我们到第一章结束已经成功的拉取了项目并运行了项目。
这时候我们会说，如果我们要开始二次开发，那么我们需要改什么呢？
一：如何新增一个页面
1. 新增页面与我们往常开发Vue 或者 React 类似，我们需要在文件夹目录的src/pages/下新建一个页面的文件夹。
例如：
2. 我在src下的pages文件夹中新建了一个页面文件夹home，并且在文件夹中建了新的tsx以及less文件。用来代表当前页面的页面内容文件。并且我给这个页面写入了一个内容，它会显示一行文字：这里是Home页面。
3. 我们也可以引入新建的less文件。Ant Design Pro 默认使用的是Css Modules。我们可以在页面中这样去使用。
我们在less文件中写入了一个样式。
并且我们在Home页面tsx中进行引入，然后以modules的方式将它赋值给div的classname
关于CssModule 的官方解释是：
所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程。（构建通常需要 webpack 或者 browserify 的帮助）。通过构建工具的帮助，可以将 class 的名字或者选择器的名字作用域化。（类似命名空间化）。
通过构建工具来使指定class达到scope的过程。
CssModules的优势则是：
- 解决全局命名冲突问题 css modules只关心组件本身 命名唯一
- 模块化 可以使用composes来引入自身模块中的样式以及另一个模块的样式
- 解决嵌套层次过深的问题 使用扁平化的类名
4. 页面新建完成后，我们则需要开始配置让页面展示出来，也就是配置页面路由。
我们打开项目目录的config/routers.ts文件。可以看到这里就是我们的项目路由地址。
我们根据下方 list.table-list 的table路由配置一个页面，看看是否能够生效呢？
答案是，生效了。当我们保存路由地址，回到页面进行刷新后，发现左侧菜单出来了一个菜单
当我们点击后，会发现路由也跳转到了我们刚才写入的页面。
至此我们的新增页面就到此结束了。伙伴们快看看，你们的跟我的是否有所不一致呢？
二：如何使用国际化？
不知道有没有细心的伙伴注意到，整个config/routers.ts 中，没有任何一个页面名字叫 查询表格
那页面上的 查询表格 这个name是怎么出来的呢？
官方是这样说的：
路由配置完成后，访问页面即可看到效果，如果需要在菜单中显示，需要配置
name，icon，hideChildrenInMenu等来辅助生成菜单。其实name为配置菜单的name，如果配置了国际化后，name则为国际化的key。
所以，在上述路由中，name 为： list.table-list。 其实它是国际化的key。也就是说，这个路由是开启了国际化的。
并且，我们在页面上的右上角使用国际化切换语言为英文后，其它菜单都变了，但就是我们新增的 home页面没有变化。
没有改变为英文。
其实，这里就牵扯到我们今天要说的第二个内容，国际化。
关于 Ant Design Pro的国际化，想看官方文档的伙伴可以直接访问官方文档进行查看哦
不详查看官方文档的，那就跟我一步一步的往下走。我们来给我们的Home 页面菜单添加上国际化（多语言切换）。
1. 首先我们需要打开 config/config.ts 文件，我们需要配置国际化。
2. 其次，我们需要在src/locales中增加相应的 国际化key。例如：
我们在locales的zh-CN （中文）的menu.ts，以及 en-US（英文）的menu.ts中增加我们的Home页面国际化key与值。
如： zh-CN（中文中添加）home页面的key ： menu.list.home。以及 home对应的中文值：我的主页
en-US（英文中添加）home页面的key：menu.list.home。以及home对应英文的值：My Home Pages
一定要注意的是，如果你想要修改哪一部分的显示语言为国际化，那么在对应国际化中的key一定要是相同的。
例如： 下述中文menu的key 与英文menu的key 需要是一样的。
=
3 下来我们只需要打开新增页面时候的config/routers.ts 这个文件，修改我们之前的 home页面路由名字为我们的 国际化key：menu.list.home 即可。
修改为
（此处不用与menu.ts中一样使用全部的key: menu.list.home）因为这里已经是封装过的，menu会自动拼接，所以我们只需要省略menu即可。在这里直接使用 list.home即可
4. 我们保存刷新下页面进行查看，因为在config中默认我们是中文，所以home页面菜单名字则会改成我们在zh-CN的menu.ts中设置的值为 我的主页。
当我们切换成英文后。
菜单则会显示成 我们在 en-US 的menu.ts 中定义好的 值： My Home Pages
到此菜单的国际化就算是修改完了。
但是这里会有伙伴想问，那我如果要修改页面的值为国际化我应该怎么做呢？
第三：如果在页面上使用国际化展示内容
此处我们以welcome页面的 欢迎使用 为例：（中英文切换）
1. 我们需要与菜单配置国际化时候类似，在src/locales 下的文件夹中，找到我们要切换的英文文件夹—— en-US/pages.ts 这个 文件。这个文件就是用来表示，页面上内容的英文显示的。
我们定义一个统一的国际化的key与值，如：
我们起的key叫： pages.welcome.link。
英文的值为 Welcome。
同样。我们在对应的中文文件夹 —— zh-CN/pages.ts 这个文件中，新增中文译文的key与值。
key与英文的key保持一致： pages.welcome.link.
值为： 欢迎使用。
2. 下来我们则需要进入到 welcome 这个页面中，使用 umi 自带的国际化组件（默认自带）FormattedMessage 来直接使用即可。FormattedMessage 组件的id 就是你定义好的 国际化的key。
例如：
3. 我们保存下内容。进入页面刷新后进行切换。
会发现已经改变。
四： 使用方法切换国际化
同样。在页面除过直接使用 FormattedMessage 组件外，我们也可以使用方法进行国际化切换。
1. 我们需要从 umi 中引入useIntl 这个钩子函数
2. 其次，实例化这个钩子函数。
3. 在页面/方法 中可以直接使用.
与 FormattedMessage 组件相比，它可以存在与方法中。
同样，我们保存下，去页面刷新试试。
显示依旧正确。
这个就是使用 Ant Design Pro的国际化。
最后，笔者说一句，笔者也是从官网文档学习过来的。不喜勿喷。
