简介

antd-pro升级以后发现他们使用了umi，所以就玩玩它是个什么东西。
umi是什么就不赘述，直接参照官网umi

环境准备

官方建议node版本是8.10或更高版本。
我的node版本是v8.9.3，正常使用。

使用create-umi创建项目

1、按照下列命令执行

$ mkdir myapp && cd myapp
$ yarn create umi

2、然后，选择需要的功能，要选择的按空格即可，我选择的是antd dva

3、确定后，将根据选择自动创建目录和文件。

4、然后手动安装依赖项

$ yarn
//或者
$ npm install

5、最后，启动本地开发服务器

$ yarn start
或者
$ npm start

如果顺利，请在浏览器中打开http：// localhost：8000，您将看到以下ui。

项目查看

按照官方执行的包路径并不是这这样，我对其进行了添加和修改
其中.umirc.js 按照官网生成应该是和package同级的一个配置文件，入下图，存在即合理，我们使用config/config.js

config.js如下图显示

router.config.js如下图显示

样板

├── dist/                            // 打包输出
├── mock/                           // mock数据
├── *config/                        //  自己创建
    ├── config.js                   // umi默认配置 参照官网
    ├── router.config.js            // 路由配置
└── src/
    ├── assets                      //静态资源
    ├── *components                  //公共组件  自己创建
    ├── layouts                     //全局页面
    ├── models                      //saga models放全局的
    ├── pages/                      // router页面 umi约定名称
        ├── document.ejs            // HTML template
    ├── *services                    //接口  自己创建
    ├── *utils                       //全局方法  自己创建
    ├── app.js                      //
    ├── global.less                 // 

使用命令行

 "node": ">=8.0.0"
$ npm install
$ npm start                     # 访问 http://localhost:5000   //正常访问含mock
$ npm run start:no-mock         # 访问 http://localhost:5000    //不使用mock的启动方式

上图‘项目查看’有package.json的截图，查看一下其中的配置，我们使用cross-env进行跨平台地设置及使用环境变量，简单区分一下有mock和无mock的启动区别，至于修改端口这个事儿看公司使用在端口上有没有要求，如果有要求就按照公司要求配置，没有要求个人建议自己维护一套端口规则，即便是不维护也不要用默认端口。

其他

其他的使用跟dva时代没有多少区别，关于数据还是redux-saga那一套东西