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請求的封裝