101 lines
3.7 KiB
Markdown
101 lines
3.7 KiB
Markdown
# *Umi.js* 介绍
|
||
|
||
接下来要介绍的最后一个东西，就是 *Umi.js*，这也是由蚂蚁金服所推出的基于 *React* 的前端框架，它和前面所介绍的 *Dva*、*Antd pro* 之间的关系是包含关系，也就是说整个 *Umi* 是一个集大成的框架，这从官方给出的插图也能看出来：
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2022-11-05-065301.png" alt="image-20221105145301148" style="zoom:50%;" />
|
||
|
||
有关 *Umi* 的介绍，可以参阅：*https://umijs.org/docs/introduce/introduce*
|
||
|
||
有关 *Umi* 的设计哲学，可以参阅：*https://umijs.org/docs/introduce/philosophy*
|
||
|
||
|
||
|
||
目前，*Umi* 最新的版本为 *4.0*，分为了**普通版**和 ***Max* 版本**，在开发后台时，我们大多使用 *Umi Max*，因为里面涵盖了我们要用到的 *antd、antd pro、dva*等技术。
|
||
|
||
在正式开始做项目之前，我们需要了解一些有关 *umi* 的基本使用和特点，主要有以下几个点：
|
||
|
||
- 约定式路由
|
||
- 插件机制
|
||
- 构建时配置和运行时配置
|
||
|
||
|
||
|
||
## 约定式路由
|
||
|
||
约定式路由并不是 *Umi* 独有的东西，像基于 *Vue* 的 *Nuxt.js*，基于 *React* 的 *Next.js* 框架，都提供了约定式路由的方式。
|
||
|
||
而早期在 *Umi 2.x* 时代，团队借鉴了这种方式，加入了约定式路由的功能，并沿用至今。
|
||
|
||
所谓约定式路由，简单来讲，就是根据你的页面级组件自动生成路由的配置，而不再需要我们自己去书写路由配置。
|
||
|
||
有关约定式路由的说明，在 *v4* 的文档中介绍相对比较简单：*https://umijs.org/docs/guides/directory-structure#pages*，*v4* 更多的是介绍配置式路由。
|
||
|
||
如果想要了解约定式路由，这里可以参阅 *v2* 和 *v3* 的文档：
|
||
|
||
- *v2* 文档：*https://v2.umijs.org/zh/guide/router.html*
|
||
|
||
- *v3* 文档：*https://v3.umijs.org/zh-CN/docs/convention-routing*
|
||
|
||
> 注意不同版本之间会有略微的差异，例如动态路由在 *v2* 和 *v3* 中的使用方式就有所区别，当发现差异时，应该查询自己对应版本的文档说明
|
||
|
||
|
||
|
||
## 插件机制
|
||
|
||
在 *Umi* 中，采用了插件的机制，所涵盖的其他技术都以插件的形式引入。
|
||
|
||
要开启某个插件，我们可以在 *.umirc.js* 中进行配置，例如：
|
||
|
||
```js
|
||
export default defineConfig({
|
||
antd: {},
|
||
access: {},
|
||
model: {},
|
||
initialState: {},
|
||
request: {},
|
||
layout: {},
|
||
dva: {},
|
||
npmClient: 'npm',
|
||
});
|
||
```
|
||
|
||
另外，如果*.umiirc.js* 文件配置的内容很多的话，可以单独提取出来，放入到 *config/config.js* 里面（二选一，*.umirc.js* 优先）
|
||
|
||
|
||
|
||
## 构建时配置和运行时配置
|
||
|
||
从 *v2* 版本开始，*Umi* 就一直包含两个配置文件，到了 *v4* 也一直保持这一特点。
|
||
|
||
**构建时配置**
|
||
|
||
在 *Umi* 中，约定项目根目录下的 *.umirc.js/ts* 为构建时配置，当我们启动 *Umi* 项目时，*Umi* 会对整个项目进行一次构建，在 *src* 目录下生成一个 *.umi* 的临时目录，构建时配置则决定了所生成的 *.umi* 目录的样子。
|
||
|
||
*.umi* 目录的结构如下：
|
||
|
||
```js
|
||
+ .umi
|
||
+ core # 内部插件生成
|
||
+ pluginA # 外部插件生成
|
||
+ presetB # 外部插件生成
|
||
+ umi.ts # 入口文件
|
||
```
|
||
|
||
因此，在构建时配置中，一个很重要的用途就是开启插件。
|
||
|
||
有关 *.umirc.js/ts* 具体的配置项，请参阅：*https://umijs.org/docs/api/config*
|
||
|
||
|
||
|
||
**运行时配置**
|
||
|
||
运行时配置和配置的区别是他跑在浏览器端，基于此，我们可以在这里写函数、*tsx*、*import* 浏览器端依赖等等，注意不要引入 *node* 依赖。
|
||
|
||
在 *umi* 中，约定 *src* 目录下的 *app.js/ts/jsx/tsx* 为运行时的配置文件。
|
||
|
||
有关运行时配置项目，请参阅：*https://umijs.org/docs/api/runtime-config*
|
||
|
||
|
||
|
||
|