基于Umi搭建的个人Dva脚手架(一) - 框架说明

1、基本概念阐述

  阅读本文前，你需要对react、dva、umi以及ant design的有一定的认识，具体的相关知识都可以参考官方文档。

  Umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架，是蚂蚁金服的底层前端框架。具体的可参考官方文档：https://umijs.org/zh/guide/ ， 本质上来讲Umi是一个react的框架。

  Dva，也是有蚂蚁金服推出的一个react框架，它对react，react-router，redux的一个整合和封装，关于Dva的相关知识可以参考官方文档：https://dvajs.com/guide/。

  Ant design，是有蚂蚁金服推出的一个react UI组件库，关于Ant design的相关知识可以参考官方文档 https://ant-design.gitee.io/docs/react/introduce-cn （镜像地址，访问速度较快）。

---

2、框架说明

  使用Umi可以快速搭建Dva，无需手写路由router.js，桉目录约定注册model等等。在Umi官方脚手架基础搭建的个人Dva脚手架地址如下：https://github.com/zhengchangshun/myUmi ，引用的是Ant design 组件库，欢迎大家提出宝贵意见。该脚手架使用场景为应用后台，针对C端等网站还有待优化，主要实现了如下功能：

  1、优化了HTTP的封装。

    1.1、实现了常用的请求封装get请求、post请求form表单格式 、 post请求json格式；

    1.2、实现跨域请求jsonp；

  2、分模块实现多个Layout布局。可以应对不同的业务场景；页面基本布局，Header、Sider都组完整的封装；

  3、动态菜单配置。

    3.1、通过递归算法实现菜单，支持多层级菜单；

    3.2、完善了菜单选中，菜单展开等基础逻辑，开箱即用；

    3.3、无需额外代码，只需传入菜单的树结构即可；

  4、基础组件的封装。

    4.1、通过对Form组件的优化，可以通过传入表单的配置文件，即可动态生成表单组件GenerateForm；

    4.2、通过对Form组件的优化，在此基础上衍生了ListFilter（列表搜索）、弹窗组件GenerateModal；

    4.3、通过配置文件可以快速的生成页面View，节省大量的开发时间

  5、完善了favicon以及404页面的配置；

  6、包含完整的demo实例，可以快速参考自定义组件、可配置组件的使用；

3、框架分模块介绍

  后续会对框架说明中的6大功能实现，做详细的介绍。每一个模块我都会单独分析，并针对代码阐述个人开发思路，敬请关注。

  基于Umi搭建个人Dva脚手架Github地址：https://github.com/zhengchangshun/myUmi

---

下一篇：基于Umi搭建的个人Dva脚手架（二） - HTTP请求的封装

---