Umi3快速上手（二）

写在前面

本人也是近期开始接触的umi3的，看了很多文档，自己也做了些总结，本文也主要借鉴了官方文档，还有一篇语雀上的教程

目录结构介绍

我们之前有试过多种方式创建的项目，但是目录结构只有两种，我们先介绍第一种目录结构：

目录结构一

├── mock
├── package.json
├── dist
├── public
├── src
│   ├── .umi
		├── layouts/index.tsx
		├── app.ts
│   └── pages
│       ├── index.css
│       └── index.ts
├── .env
└── .umirc.ts

mock目录

存储 mock 文件，此目录下所有 js 和 ts 文件会被解析为 mock 文件。默认开启mock功能，可在.env文件中关闭： MOCK=none；

dist 目录

执行 umi build 后，产物默认会存放在这里。

public 目录

此目录下所有文件会被 copy 到输出路径。

package.json

包含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和 umi-plugin- 开头的依赖会被自动注册为插件或插件集。

.umirc.ts

配置文件，包含 umi 内置功能和插件的配置。（它和我们接下来介绍的config/config.ts一样，一般是二选一，当两者同时存在时，优先使用.umirc.ts。）

.env

环境变量。一般不需要更改，例如：

# 更改服务启动端口号
PORT=8001

# 关闭自动打开浏览器，默认为打开
BROWSER=none

src/.umi/

临时文件目录，比如入口文件、路由等，都会被临时生成到这里。不要提交 .umi 目录到 git 仓库，他们会在 umi dev 和 umi build 时被删除并重新生成。

src/layouts/index.tsx

约定式路由时的全局布局文件。

src/pages 目录

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

app.ts

运行时配置文件，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等。

typings.d.ts配置(使用typescript)

根据实际情况进行后缀添加，否则ts会报导入错误

declare module "*.png";
declare module "*.jpg";
declare module '*.less';

目录结构二（推荐）

这种目录结构的项目创建方法，我们之前有介绍

├── config
├── mock
├── dist
├── public
├── src
    ├── .umi
		├── assets
		├── components
		├── loacls
		├── layouts
		├── models
		├── services
		├── utils
    ├── pages
        ├── index.less
        └── index.ts
    ├── global.less
    ├── global.ts
    ├── mainfest.json
    ├── service-work.js
    └── typings.d.ts
├── tests
├── package.json
├── .env
└── .umirc.ts

src/assets

存放静态资源，例如图片文件、字体文件等。

src/components

存放全局通用组件。

src/layouts

全局布局，如果该文件夹下有index.(js|tsx)会在所有路由外面嵌套一层路由。例如：

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

嵌套之后：

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

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

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

只要存在 layouts/index就生效,如果你不需要这个，那你只能将它重命名为别的名字。(可在index文件中进行全局布局，或者根据pathname修改不同路由下的布局)

src/models

全局models,如果有一个以上的页面会使用相同namespace空间内的代码，请将models文件放在此处，不然两个页面之间做交互时，namespace中的代码会产生影响（就是store）

src/services

存放全局通用请求

src/utils

存放通用方法

tests

该文件为测试脚本文件，不会生成路由配置，如果需要使用mock测试，可以在外部mock文件中或者在该文件下创建__mock__文件。

现在附上目录二的项目创建流程（图文）

step1：

$ mkdir myapp && cd myapp

step2：

$ yarn create umi
# npm create umi

step3选择 ant-design-pro

step4选择 typescript

step5选择 simple，当然你也可以选择complete，你可以试试，有惊喜哦！

最后，你在命令行中，安装依赖后，启动项目就可以看到这种效果：

下章更精彩
当然了，本人也在不断的踩坑中，无论是typescript，react，umi3…还有很多的坑要踩。文中有什么不妥之处，也欢迎广大网友，批评指正，如有需要提供某一模块更详细的教程的，欢迎留言。