环境准备

首先的有 node , 并确保node版本是 8.10 以上

node -v
8.1x

推荐使用 yarn 管理 npm 依赖，并使用国内源

#国内源
npm i yarn tyarn -g
tyarn -v

然后全局安装umi, 并确保版本2.0.0 或以上。

yarn global add umi
umi -v
2.0.0

脚手架

找个文件夹新建空目录

mkdir myapp  && cd myapp

然后通过 umi g 创建一些页面

umi g page index
umi g page users

然后启动本地服务器

umi dev

约定式路由

启动 umi dev 后，大家会发现 pages 下多了个 .umi 的目录。这是啥？这是 umi 的临时目录，可以在这里做一些验证，但请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。

然后我们在 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 两个页面之间通过路由跳转了。

部署发布

构建

执行 umi build，

umi build

构建产物默认生成到 ./dist下，

./dist
├── index.html
├── umi.css
└── umi.js

#本地验证

发布之前，可以通过 serve 做本地验证，

yarn global add serve
serve ./dist

部署

本地验证完，就可以部署了，这里通过 now 来做演示。

yarn global add now
now ./dist

然后打开相应的地址就能访问到线上的地址了。

测试与配置检查

测试

umi 内置了基于 jest 的测试工具 umi-test ：

umi test

配置检查

umi inspect

umiJS快速上手