umi使用介绍

1、结构

.
├── dist/                          // 默认的 build 输出目录
├── mock/                          // mock 文件所在目录，基于 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二选一
└── src/                           // 源码目录，可选
    ├── layouts/index.js           // 全局布局
    ├── pages/                     // 页面目录，里面的文件即路由
        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       // build 临时目录，会自动删除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1，任意命名，导出 react 组件
        ├── page1.test.js          // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js               // 页面 2，任意命名
    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
├── .umirc.js                      // umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json

src/layouts ：

　　实际上实在原来的路由外面套了一层

route：

[path: , component:]

如果使用layouts/index.js，那么

route:

[{path:, component:,

routes:[path:, component]} ]

src/pages:

　　约定pages下所有(j|t)sx? 即为路由

src/pages/.umi:

　　这个是umi dev生产的临时目录，默认包含umi.js和router.js

　　不由随便修改，umi重启或者pages文件修改都会重新生成哥哥文件夹的文件

2、新增页面

进入src目录，执行命令

umi g page users
即可打开 http://localhost:8000/users

src/layouts ：

src/pages:

src/pages/.umi:

猜你喜欢