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. 安装 Umi 之前，首先要保证安装了最新版的 node 以及 git。
2. 如果你还没有安装 yarn 和 tyarn，建议先安装它们。 yarn 安装依赖包比 nmp 的可靠性更高，具体参考两者的区别。tyarn 是 yarn 的国内镜像，以下安装过程都是使用的 tyarn。
3. 使用脚手架命令安装（二选一）：

// 默认安装无提示
tyarn create @umijs/umi-app

或者

// 可以选择不同安装选项，有提示
tyarn create umi

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

tyarn install

然后输入启动命令：

yarn start

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

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

---

下一篇：UmiJS 3.X实战从头开始（二）：如何使用