项目结构

.
├── mock
├── package.json
├── src
│   ├── app.js
│   ├── assets
│   │   └── yay.jpg
│   ├── global.css
│   ├── layouts
│   │   ├── index.css
│   │   └── index.js
│   ├── models
│   └── pages
│       ├── index.css
│       └── index.js
├── .env
└── .umirc.js

这里是我们当前项目的目录结构，使用 create-umi 创建的项目，是一个典型的 umi 项目结构，我们可以在 umi 约定使用的目录中，添加我们所需要的内容，达到快速实现功能需求的目的。

mock

约定 mock 目录里所有的 .js 文件会被解析为 mock 文件。比如，新建 mock/users.js，内容如下：

export default {
  '/api/users': ['a', 'b'],
}

然后在浏览器里访问 http://localhost:8000/api/users 就可以看到 ['a', 'b'] 了。

注意请求地址和mock里面的文件名无关，只和文件内部的定义相关。你可以取任意的命名，但为了更好的维护项目，你应该取一些语意化更好的名字

src

我们约定将项目的所有源码放在 src 目录，umi 项目的大部分的工作都将在这里进行。当我们运行 umi dev 或者 umi build 时，此目录下的代码会被转换成浏览器能够运行的正确的 JavaScript 版本，所以我们可以在这里使用 TypeScript 或者其他 JavaScript 新语法。

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',
      },
      ],
  },
]

从组件角度可以简单的理解为如下关系：

<layout>
    <page>1</page>
    <page>2</page>
</layout>

只要存在 layouts/index.js就生效,如果你不需要这个，那你只能将它重命名为别的名字。

src/pages

约定 pages 下所有的 (j|t)sx? 文件即路由。在 umi 中可以使用约定式路由和配置式路由，在实际项目开发中，我个人偏向于使用，约定式路由。毕竟这是 umi 的主要特性之一。使用约定式路由，意味着不需要维护，可怕的路由配置文件。最常用的有基础路由和动态路由（用于详情页等，需要从 url 取参数的情况）：

基础路由

假设 pages 目录结构如下：

+ pages/
  + users/
    - index.js
    - list.js
  - index.js

umi 将自动生成如下的路由配置：

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

动态路由

umi 中约定，被 [] 包裹的目录或文件为动态路由。比如以下目录结构：

+ pages/
  + [post]/
    - index.js
    - comments.js
  + users/
    [id].js
  - index.js

会生成路由配置如下：

[
  {
    path: '/',
    component: './pages/index.js',
  },
  {
    path: '/users/:id',
    component: './pages/users/$id.js',
  },
  {
    path: '/:post/',
    component: './pages/$post/index.js',
  },
  {
    path: '/:post/comments',
    component: './pages/$post/comments.js',
  },
]

src/pages/404.js

当访问的路由地址不存在时，会自动显示404 页面。只有build之后生效。调试的时候可以访问 /404 。

注意：开发模式下会使用内置 umi 提供的 404 提示页面。

src/pages/document.ejs

若此文件存在，则会覆盖默认的 HTML 模板。需至少包含以下代码，

<div id="root"></div>

常用于需要设置网站名称，增加 meta，增加头部 js 等情况。

虽然上述这些功能都可以通过umi的配置或方法实现，但是，显示的在这个文件中维护，会更加清晰一些。

src/.umi/

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

以上说明来自 umi 官网，如果你不理解，或者不想理解太多 umi 的细节，你可以不要理会这些文件。

src/.umi-production/

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

以上说明来自 umi 官网，如果你不理解，或者不想理解太多 umi 的细节，你可以不要理会这些文件。

src/*/.test.js & *.e2e.js

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

src/global.(j|t)sx?

在入口文件最前面被自动引入，可以考虑在此加入 polyfill。umi 区别于其他前端框架，没有显示的程序主入口，如 src/app.js 或 src/index.js，所以在引用某些模块的时候，如果模块功能要求在程序主入口添加代码时，你就可以写到这个文件。

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

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

.umirc.js 和 config/config.js

umi 的配置文件，二选一。当两者同时存在时，优先使用.umirc.js。

.env

环境变量，比如：

BROWSER=none

参考文档：umi官网-目录及约定