React+umi+dva+antd入门兼项目搭建
前言：React+umi+dva+antd是目前主流的前端框，本文章从零搭建一个React+umi+dva+antd的前端框架，供大家参考。
一 项目组成
-
React
React是前端三大主流框架之一。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件
-
umi
umi是可扩展的企业级前端应用框架。umi以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
其实umi的作用说人话就是，在安装umi这一个依赖后，就可以立马启动开发，无需再安装react、webpack、react-router等，简称开箱即用。还有就是使用umi后项目的路由可以变得非常简洁明了。
-
dva
dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
dva可以分为主要的三个部分，models、services 和 views。其中，views层负责页面上的展示；services层里面主要写一些请求后台接口的方法；models层存放了各种数据，并对数据进行相应的交互。
-
antd
Ant Design是一套企业级 UI 设计语言和 React 组件库，它内含超多的前端组件，例如Table表格、Modal弹窗、Tootip文字提示等等，antd把它们封装成了一个个的‘Html标签’，再配合这些组件的API，使得它们非常的方便灵活。
二 项目搭建
-
项目环境
本项目是在win10操作系统下完成，且需要Node.js且版本大于大于等于 8.5.0。
在后续操作汇总中我们要多次用到npm命令，npm是Node.js的包管理工具（package manager），故我们在项目开始前要先查看一下node版本和npm版本是否达标。node -v
npm -v -
搭建准备
首先在本地选择一个空文件夹，鼠标选中上面的地址输入cmd回车进入管理员模式
-
全局安装umi
npm install umi -g
-
新建项目文件夹并进入项目文件夹
mkdir umi_wy && cd umi_wy
-
执行umi命令
npm create umi
-
选择umi模板信息
- 运行完后会 让我们选择umi模板类型，这是我们选择第一项ant-desigen-pro
选完umi模板类型后，我们需要选择是否使用什么语言，这里我们选择TypeScipt，也就是ts，点击回车即选择成功
接着我们要选择哪种类型的脚手架，是完整的还是简单的，这里我们选择简单的，然后就搭建完成了。
-
项目搭建完成
经过上门的一系列命令，项目就搭建完成了！！
-
注意事项
在执行 npm create umi 命令时 如果报错，这个时候需要者找到nodejs文件夹下的create-umi.cmd文件，因为每个人的文件地址不同，所以这里就不贴出图片了，选中这个文件反键点击编辑。如果看到以下内容，删除开头的 %~dp0\ 再在刚刚的命令行输入create-umi即可。
@"%~dp0\C:\Users\PC\AppData\Local\Yarn\Data\global\node_modules.bin\create-umi.cmd" %*
@"C:\Users\PC\AppData\Local\Yarn\Data\global\node_modules.bin\create-umi.cmd" %*
三 项目详情
-
安装依赖并运行项目
将文件拖入vsCode，打开终端输入以下命令
npm i
依赖安装完成后，输入
npm start
在网页打开地址，就可以看到我们构建的项目登陆页
输入账号密码，点击登陆就可以看到我们的首页，看到这里是不是很熟悉，这就是我们平时开发的项目的基本框架，我们再来看看代码，看一下熟悉不熟悉。
-
项目代码简介
routes.ts 路由页
menu.ts 面包屑导航&&菜单文字文件
登陆页代码
