React + Umi + Dva + Antd 简述 及创建项目过程简述

React(你的第一个组件 – React)

React是前端三大主流框架之一。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件

//安装react框架 (此处推荐使用npx) npx如果本地不具备，需要先进性安装
安装npx
cnpm install npx -g 

//初始化react项目
npx create-react-app xxx

Umi(快速上手)

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

简单来说，Umi就是一整套可以开箱即用的框架,其中集成了React，webpack，react-router(更简洁的路由方式)等内容，可以运行命令后，傻瓜式开发

//首先需要确保本地的node版本为10.13 或以上
//个人建议使用yarn进行项目的依赖管理及安装
cnpm install yarn -g 

//先创建目录 且 进入目录
mkidr umi_project && cd umi_project

//初始化创建项目
yarn create @umijs/umi-app  或者 使用npx @umijs/create-umi-app

或者使用如下方案进行创建
npm create umi  (当执行此命令以后，会提示选择一系列的依赖，ui库等内容)

Dva(https://ant.design/docs/react/introduce-cn介绍 | DvaJShttps://ant.design/docs/react/introduce-cn)

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

dva可以分为主要的三个部分，models、services 和 views。其中，views层负责页面上的展示；services层里面主要写一些请求后台接口的方法；models层存放了各种数据，并对数据进行相应的交互

//安装dva
cnpm install dva-cli g

Antd(https://ant.design/docs/react/introduce-cn)

Ant Design是一套企业级 UI 设计语言和 React 组件库，它内含超多的前端组件，例如Table表格、Modal弹窗、Tootip文字提示等等，antd把它们封装成了一个个的‘Html标签’，再配合这些组件的API，使得它们非常的方便灵活。

此框架可以基于Umi进行选择性安装依赖，可根据实际情况进行处理

项目创建

1》以下项目，使用umi+npm为基础进行创建，后续安装过程中进行拓展

2》低版本node不兼容react的部分内容，需要进行升级或者采用nvm进行node版本的管理

（windows下的nvm搭建可参考 http://t.csdn.cn/DrqX0）

3》如果windows下对创建项目过程中的依赖项无法进行选择，可以参考下方链接：http://t.csdn.cn/cyNYa

项目初始化

1. 运行命令 npm create umi
2. 选择项目相关拓展(此处采用最基础版本)选择以后回车
3. 选择项目的包管理工具(可根据实际情况来决定，此处选择cnpm)
4. 由于网络问题，此处我选择的为taobao源，大家可根据实际情况进行选择

---

至此，项目的配置项已经选择完成，稍等片刻，项目即可初始化完成

 

 项目启动

1》运行cnpm install 进行项目依赖的安装 

2》运行 npm run dev 即可启动项目，复制访问ip 端口到浏览器，即可看到如下页面：

 

 生成的项目目录如下：

 项目内细节概述

1. 路由

        路由文件位于/src/.umirc.ts中进行配置