# 前言

本章节开始，将进入客户端的开发，涉及到的有 Web 前端界面、CLI工具、插件等等。

客户端的具体表现形式并不唯一，最终目的都是为了提高研发效率与质量。小册只是举出了常见的三种进行演示而已。

本章将会介绍 Web 相关界面的功能开发与一些必要的内容。

# 搭建基础框架

由于项目需要快速上手以及上线，对于样式、布局、路由、权限等等一系列的通用性很强的基础框架，自研比较花时间，投入的回报率不高。对于大部分中小型团队，直接选择第三方成熟的中台框架会方便很多，性价比比较高，例如 ANT DESIGN PRO、Element Admin、Iview Admin 等。

本小册采用了 UmiJS + ANT DESIGN PRO 的架构进行研发。

同学们可以根据自己团队情况选择第三方或者自研。只要完成功能，开发语言只是完成度的工具。

# UmiJS 是什么？

UmiJS，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

# ANT DESIGN PRO 是什么？

Ant Design Pro 是一个企业级中后台前端/设计解决方案，基于 Ant Design 的设计规范和基础组件的基础上，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

# 快速搭建基础框架

小册将采用 UmiJS 3.0 + Ant Design Pro 4.0 来构建一个基础的模板。

yarn create umi

 Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

Ant Design Pro 脚手架将会自动安装，安装完依赖之后，一个基础框架就完成了。

# 自定义模块

在完成基础框架之后，通用型的框架为了兼容大部分项目都会融入很多预设的配置项或者功能，对于每个团队来说，有些功能并不是必须的，所以需要对基础框架做一个自定义，增删一些模块完善功能。

# 删除全球化

常规，Ant Design Pro 的国际化在大部分团队意义不大，所以可以先删除，后期有需求再进行添加。

先删除 @umijs/plugin-locale 插件，其次删除项目中所有 formatMessage 相关的动态代码，移除 i18n 的相关文件，修改成正常文案即可。

如果你是按照上述的模板下来，再删除 @umijs/plugin-locale 的配置之后，项目应该会报错，按照报错的指示修正就行。并不会造成很多麻烦。

# 添加开发环境

常规开发环境都需要有 3 套，分别是 dev（开发环境），test（测试环境），prod（生产环境）。如果资源富余的话，可以添加 pre（预发环境）。

Umi 通过环境变量 UMI_ENV 可以区分不同环境来指定配置。

// .umirc.js 或者 config/config.js
export default { a: 1, b: 2 };
// .umirc.local.js 或者 config/config.local.js 开发环境
export default { c: 'local' };
// .umirc.test.js 或者 config/config.test.js
export default { b: 'cloud', c: 'cloud' };