UmiJS 3.X实战从头开始（一）：安装Umi

最近参与开发的一个后台项目，前端开发框架采用了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 umi
tyarn global add create-umi

正常安装后，继续安装依赖：

tyarn install

然后输入启动命令：

yarn start

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

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