ant design入门_Umi + ant Design Pro最简单的入门教程（一）初

前言

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。这个库入门的门槛比较高，umi是这个样子的，umi = react + redux + react-router + ts + dva + umi脚手架 + ant Design Pro + ant Design UI + umi-block。如果你没有丰富的react基础你来学习他或者是看懂它，那将是很困难的一件事，本博客则是尽量把用户当做小白进行入门，如果你依然觉得困难，那么抱歉本人只能做到这样了。轻喷...

在开始之前，你一定要有react的基础，不然你来了只是白来，因为即使项目跑起来了，你也看不懂代码。我猜你需要这个：react入门-React + webpack 开发单页面应用

快速上手

环境准备

首先得有 node，并确保 node 版本是 8.10 或以上。(mac 下推荐使用 nvm 来管理 node 版本)

$ node -v

8.1x

使用 npm

其官网建议使用的是yarn，但是本人用的是npm，所以全程npm，你需要适应我。

npm -v

全局安装 umi，并确保版本是 2.0.0 或以上。

$ npm global add umi

$ umi -v

2.0.0

创建 umi 项目

首先，找个地方建个空目录

$ mkdir my-umi-app && cd my-umi-app

然后使用 npm create umi 脚手架，创建模板：

$ npm create umi

# Choose ant-design-pro:

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则为我们提供了一个模板，我们在这个模板上进行开发。

问询 ? Which language do you want to use?，我们选择JavaScript，这是为了降低入门的门槛，所以这里决定使用js，如果你是大佬请忽视这个动作。<