首先查看官网，了解其特性和快速上手
https://umijs.org/zh/guide/create-umi-app.html
接下来讲一下我使用的流程
1、创建umi项目

$ mkdir myapp && cd myapp
$ yarn create umi 或者 npm create umi

WX20190121-111140.png

选择对应的需要的框架，回车就初始化好了项目
然后安装依赖

yarn 或者 npm install

最后运行

yarn start 或者 npm start

2、创建路由页面

umi g page index  对应的路由是 /index

//使用umi的路由
import Link from 'umi/link';
export default () => {
  <div>
    /* 普通使用 */
    <Link to="/list">Go to list page</Link>
    /* 带参数 */
    <Link to="/list?a=b">Go to list page</Link>
    /* 包含子组件 */
    <Link to="/list?a=b"><button>Go to list page</button></Link>
  </div>
}
//使用命令跳转
// 普通跳转，不带参数
router.push('/list');
// 带参数
router.push('/list?a=b');
router.push({
  pathname: '/list',
  query: {
    a: 'b',
  },
});

3、配置权限路由（通过注释扩展路由）

/**
 * title: Index Page
 * Routes:
 *   - ./src/routes/PrivateRoute.js
 *   
 */

重新运行之后，会看到.umi/router.js里面会多出来一段

WX20190121-112859.png

PrivateRoute.js里面的代码：

WX20190121-113229.png

这样最简单的一个需求就能满足了，下面是对umi进行配置

#配置文件

umi 允许在 .umirc.js 或 config/config.js （二选一，.umirc.js 优先）中进行配置，支持 ES6 语法。
https://umijs.org/zh/config/#theme

使用umi配置px转rem

这个配置没有忽略node_modules里面的css文件，导致ant里面的css会被转成rem,这个问题展示没有找到解决方法，不过可以引用antd.less文件，可以暂时解决这个问题

//下载  lib-flexible   px2rem-loader
chainWebpack(config, { webpack }) {
    config.module
      .rule('postcss')
      .test(/\.css$/)
      .use('postcss-loader')
      .loader('px2rem-loader')
      .before('postcss-loader') // this makes it work.
      .options({ remUnit: 75, remPrecision: 8 });
  }
 config.merge({
    resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
      }},
});

umi打包之后解决文件缓存问题

config.output.filename(`[name].${Date.now()}.js`).end();