最近参加开发的一个后盾我的项目，前端开发框架采纳了reactJS。因为之前始终是用vue，尽管之前也有学习过react的一些常识，但仅仅是入门根底内容，并没有搭建过大型利用。这次正好利用这个机会，打算从头开始搭建一套基于react的前端框架。

通过技术调研和探讨，最终ui框架确定应用AntDesign，所以前端底层框架就抉择了UmiJS。Umi整合了阿里的Dva,AntDesign，能够说是阿里前端工具的全家福了。

Umi 3.x版本的官网介绍是：插件化的企业级前端利用框架。官网列出了6个个性，其中对开发人员来说，感兴趣的次要有3个：

  • 可扩大

Umi 实现了残缺的生命周期，并使其插件化，Umi 外部性能也全由插件实现。此外还反对插件和插件集，以满足性能和垂直域的分层需要。

  • 开箱即用

Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，外延丰盛的性能，可满足日常 80% 的开发需要。

  • 齐备路由

同时反对配置式路由和约定式路由，同时放弃性能的齐备性，比方动静路由、嵌套路由、权限路由等等。

上面就来说一下 Umi 3.X 的装置过程：

  1. 如果你还没有装置yarn和tyarn，倡议先装置它们。yarn装置依赖包比nmp的可靠性更高，具体参考两者的区别。tyarn是yarn的国内镜像，以下装置过程都是应用的tyarn。
  2. 应用脚手架命令装置（二选一）：
// 默认装置无提醒tyarn create @umijs/umi-ap

或者

// 能够抉择不同装置选项，有提醒tyarn create umi

如果装置遇到问题，能够尝试先全局装置umi和create-umi，个别状况就没有问题了：

tyarn global add umityarn global add create-umi

失常装置后，持续装置依赖：

tyarn install

而后输出启动命令：

yarn start

不出意外的话，你能够在浏览器看到以下页面：


这就意味着咱们的第一个以umi为底层框架的前端react+antDesign我的项目启动胜利了。