umi学习总结

umi介绍

umi是什么？

Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

umi的特性

开发环境

Node.js

Umi.js需要使用Node.js来进行开发，首先需要确保电脑已经安装了Node.js且版本在14以上。

依赖管理工具

Node安装完成后会自带npm依赖管理工具，但是Umi推荐使用
pnpm作为依赖管理工具

目录结构

根目录下
package.json
包含插件和插件集

.env
环境变量，比如：

PORT=8888
COMPRESS=none

.umirc.ts
与 config/config.ts文件功能相同， .umirc.ts文件优先级更高
配置文件，包含umi内置功能和插件的配置

config/config.ts
与 .umirc.ts文件功能相同，.umirc.ts文件优先级更高
配置文件，包含umi内置功能和插件的配置

dist目录
执行umi build后，产物会默认存到这里。可以通过配置修改产物的输出路径。

mock目录
存储mock文件，此目录下所有js和ts文件都会被解析为mock文件。用于本地的模拟数据服务。

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

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

路由

配置路由

在配置文件中通过routes进行配置，格式是路由信息的数组。
比如

export default {
   
  routes: [
    {
    path: '/', component: 'index' },
    {
    path: '/user', component: 'user' },
  ],
}

path
type：字符串
path只支持两种占位符配置，动态参数 :id 的形式、* 通配符，通配符只能出现在路由字符串的最后

以下是支持的路由路径配置形式

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

以下是不支持的路由配置形式：

/users/:id?
/tweets/:id(\d+)</