react umi+dva开发基本流程（1）

首先简单认识一下：官网地址：https://umijs.org/zh/guide/ umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，目前内外部加起来已有 50+ 的插件。

umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 600+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。

使用umi搭建项目基本目录结构如下：

├── dist/                          // 默认的 build 输出目录

├── mock/                          // mock 文件所在目录，基于 express

├── config/

    ├── config.js                  // umi 配置，同 .umirc.js，二选一

└── src/                          // 源码目录，可选

    ├── layouts/index.js          // 全局布局

    ├── pages/                    // 页面目录，里面的文件即路由

        ├── .umi/                  // dev 临时目录，需添加到 .gitignore

        ├── .umi-production/      // build 临时目录，会自动删除

        ├── document.ejs          // HTML 模板

        ├── 404.js                // 404 页面

        ├── page1.js              // 页面 1，任意命名，导出 react 组件

        ├── page1.test.js          // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件

        └── page2.js              // 页面 2，任意命名

    ├── global.css                // 约定的全局样式文件，自动引入，也可以用 global.less

    ├── global.js                  // 可以在这里加入 polyfill

    ├── app.js                    // 运行时配置文件

├── .umirc.js                      // umi 配置，同 config/config.js，二选一

├── .env                          // 环境变量

└── package.json

使用步骤如下：

全局安装环境

npm install -g umi

构建项目  & 创建src目录

mkdir  project &&  cd project  &&  mkdir src &&  cd src

创建页面／路由组件

umi g page index  //自动生成pages目录，以及index.js index.css

运行项目

umi dev    //打开localhost:8000  会看到index.js内的组件内容

构建生产环境

umi build

这些就是umi基本的页面构建以及项目启动。

pages中的js组件并列，文件名字便是路由路径。

umi中可以通过导航标签来进行路由切换

import Link from 'umi/link';list

路由传参－3种形式（params，query，state）

state list

query list

params list

接收参数

state {props.location.state.id}

query {props.location.query.id}

params

首先讲list组件放在list目录下，list.js更名为$id.js，id为保存params传参的变量

使用  {props.match.params.id}

同时嵌套路由需要构建_layout.js。

需要展示子组件的容器通过 {props.children}

HTML模版定义－定义title，meta等设置，构建document.ejs

                   

全局公共css编写－构建global.css  无需引入，所有pages组件通用样式。