UmiJS介绍--目录及约定（二）

umi 通过 create-umi 提供脚手架，包含一定的定制化能力。推荐使用 yarn create 命令，因为能确保每次使用最新的脚手架。

1. 创建项目

mkdir myapp && cd myapp
yarn create umi

然后，选择你需要的功能，功能介绍详见 plugin/umi-plugin-react
然后手动安装依赖

yarn

最后通过 yarn start 启动本地开发，

yarn start

一个复杂应用的目录结构如下

├── 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

2. mock

约定 mock 目录里所有的 .js 文件会被解析为 mock 文件

3. src

约定 src 为源码目录，但是可选，简单项目可以不加 src 这层目录

4. src/layouts/index.js

全局布局，实际上是在路由外面套了一层。
你的路由是：

[
  { path: '/', component: './pages/index' },
  { path: '/users', component: './pages/users' },
]

如果有 layouts/index.js，那么路由则变为：

[
  { path: '/', component: './layouts/index', routes: [
    { path: '/', component: './pages/index' },
    { path: '/users', component: './pages/users' },
  ] }
]

5. src/pages

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

6. src/pages/404.js

开发模式下有内置 umi 提供的 404 提示页面，所以只有显式访问 /404 才能访问到这个页面

7. src/pages/document.ejs

有这个文件时，会覆盖默认的 HTML 模板。至少包含以下代码

8. src/pages/.umi

这是 umi dev 时生产的临时目录，默认包含 umi.js 和 router.js，有些插件也会在这里生成一些其他临时文件。可以在这里做一些验证，但请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。

9. src/pages/.umi-production

同 src/pagers/.umi，但是是在 umi build 时生成的，会在 umi build 执行完自动删除。

10. .test.js 和 .e2e.js

测试文件，umi test 会查找所有的 .(test|e2e).(j|t)s 文件跑测试。

11. src/global.(j|t)sx?

在入口文件最前面被自动引入，可以考虑在此加入 polyfill。

12. src/global.(css|less|sass|scss)

这个文件不走 css modules，自动被引入，可以写一些全局样式，或者做一些样式覆盖。

13. .umirc.js 和 config/config.js

umi 的配置文件，二选一。

14. .env

环境变量，比如：

CLEAR_CONSOLE=none
BROWSER=none

来源 https://umijs.org/zh/guide/router.html