文章目录
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+