React 之umi框架项目搭建

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
手动搭建基础的Umi框架。

一、创建项目文件夹

可以直接在目录下新建文件夹，也可使用mkdir myumi命令创建项目文件夹

二、在需要的文件夹下的终端输入

在需要生成项目的文件夹下，打开cmd 或者 终端 命令行输入 yarn create umi

E:\文件\react\myumi>yarn create umi

三、选择需要生成的项目类型

? Select the boilerplate type (Use arrow keys)
> ant-design-pro  - Create project with a layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  plugin          - Create a umi plugin.

app，通用项目脚手架，支持选择是否启用 TypeScript，以及 umi-plugin-react 包含的功能
ant-design-pro，仅包含 ant-design-pro 布局的脚手架，具体页面可通过 umi block 添加
plugin，插件脚手架

可以使用上下箭头进行切换，在这里我切换到了app，然后回车
这时会出现提示，是否要使用typescript？可根据实际项目开发情况选择是否使用

? Do you want to use typescript? (y/N)

四、选择所需功能

接下来会给你提示，您希望启用什么功能，此项是多选，上下箭头进行切换，按空格键选中，选择完成按下回车

? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) antd
 ( ) dva
 ( ) code splitting
 ( ) dll
 ( ) internationalization

antd：是基于 Ant Design 设计体系的 React UI 组件库。
dva：dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
code splitting：代码拆分可以创建多个 bundle 在运行时加载。
dll：dll预编译提高webpack打包速度。
internationalization：国际化。

五、安装依赖

编译完成后，安装所需依赖项

E:\文件\react\myumi> yarn install

依赖安装所需时间会久一些，耐心等待。

六、运行

运行成功，到此项目搭建完成