UmiJS入门

环境准备

• 首先得有node，并且确保node版本是8.10或以上。

node -v //查看node版本
8.1x

• 安装全局umi，并确保版本是2.0.0或以上。

yarn global add umi //安装全局umi
umi -v //查看umi版本

脚手架

• 首先建一个空目录

mkdir myapp //创建一个名为myapp的新目录

• 然后进入该目录

cd myapp //切换到myapp目录下

可简写成：

mkdir myapp && cd myapp

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

umi g page index //创建一个以page为目录的index.js文件
umi g page users//创建一个以page为目录的users.js文件

• 然后启动本地服务，会在浏览器看到上面两个页面的内容

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 //构建产物默认生成到 ./dist 下

本地验证

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

yarn global add serve //添加全局server
serve ./dist

可以在浏览器访问生成的地址，里面的内容和umi dev构建生成的内容一样。

部署

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

yarn global add now //添加全局now
now ./dist