前言
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,如果你是大佬请忽视这个动作。<