UmiJS介绍--快速上手（一）

1.介绍

umi是一个可插拔的企业级react应用框架。umi以路由为基础的，支持类next.js的约定式路由，以及各种进阶的路由功能
umi配以完善的插件体系，覆盖从源码到构建产物的每个生命周期
umi是蚂蚁金服的底层前端框架
umi 可以简单地理解为 roadhog + 路由，思路类似 next.js/nuxt.js，辅以一套插件机制，目的是通过框架的方式简化 React 开发

2.特性

1.开箱即用：内置react、react-router等
2.类next.js且功能完备的路由约定，同时支持配置的路由方式
3.完善的插件体系，覆盖从源码到构建产物的每个生命周期
4.高性能，通过插件支持PWA(渐进式WEB应用)、以路由为单位的code splitting等
5.支持静态页面导出，适配各种环境
6.开发启动快，支持一点开启dll和hard-source-webpack-plugin等
7.一键兼容到IE9,基于umi-plugin-polyfills
8.完善的TypeScript支持，包括d.ts定义和umi test
9,与dva的数据流的深入融合，支持duck directory、model的自动加载、code splitting等等

3.快速上手

1.下载node,并且版本是8.10或以上
2.推荐使用yarn管理npm依赖，并使用国内源

//国内源
npm i yarn tyarn -g
//阿里内网源
tnpm i yarn @alipay/yarn -g

3.全局安装umi,版本是2.0.0或以上

yarn global add umi

4.脚手架
创建页面

mkdir myapp && cd myapp

umi g page index
umi g page users

umi g 是 umi generate 的别名，可用于快速生成 component、page、layout 等，并且可在插件里被扩展，比如 umi-plugin-dva 里扩展了 dva:model，然后就可以通过 umi g dva:model foo 快速 dva 的 model。

创建后pages目录如下

── pages
    ├── index.css
    ├── index.js
    ├── users.css
    └── users.js

5.启动本地服务器

umi dev

6.约定式路由
启动umi dev后，pages下多个.umi的目录。这是 umi 的临时目录，可以在这里做一些验证，但请不要直接在这里修改代码
我们在 index 和 users 直接加一些路由跳转逻辑
先修改 pages/index.js，

+ import Link from 'umi/link';
import styles from './index.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page index</h1>
+     <Link to="/users">go to /users</Link>
    </div>
  );
}

再修改 pages/users.js，

+ import router from 'umi/router';
import styles from './index.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page index</h1>
+     <button onClick={() => { router.goBack(); }}>go back</button>
    </div>
  );
}

然后浏览器验证，应该已经可以在 index 和 users 两个页面之间通过路由跳转了。
7.部署发布
执行umi build,构建产物默认生成到 ./dist 下
通过 serve 做本地验证,正常情况下应该是和 umi dev 一致的
8.部署
本地验证完，就可以部署了，这里通过 now 来做演示

yarn global add now
now ./dist

然后打开相应的地址就能访问到线上的地址了。
来源 https://umijs.org/zh/guide/create-umi-app.html