本地环境
首先需要node环境，确认本地是否安装了node
之后可以通过node安装Umi官方推荐的pnpm
1
| npm install -g pnpm@latest-10
|
之后使用下面的命令快速启动一个本地项目
1
| pnpm dlx create-umi@latest
|
可以看到目录下都有这些内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| quick-start-app master ls
Directory: C:\Users\28459\Desktop\front-end\quick-start-app
Mode LastWriteTime Length Name
---- ------------- ------ ----
d---- 2025/2/17 13:58 node_modules
d---- 2025/2/17 13:58 src
-a--- 2025/2/17 13:58 124 .gitignore
-a--- 2025/2/17 13:58 42 .npmrc
-a--- 2025/2/17 13:58 190 .umirc.ts
-a--- 2025/2/17 13:58 389 package.json
-a--- 2025/2/17 13:58 327128 pnpm-lock.yaml
-a--- 2025/2/17 13:58 44 tsconfig.json
-a--- 2025/2/17 13:57 22 typings.d.ts
|
通过 pnpm dev进行调试，通过pnpm umi g来调用工具自动生成前端页面
主要的关键目录结构如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .
├── package.json
├── pnpm-lock.yaml
├── src
│ ├── assets
│ │ └── yay.jpg
│ ├── layouts
│ │ ├── index.less
│ │ └── index.tsx
│ └── pages
│ ├── docs.tsx
│ └── index.tsx
├── tsconfig.json
└── typings.d.ts
|
目录结构
算上最佳实践的工程项目，下面简单说一下目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| .
├── config
│ └── config.ts
├── dist
├── mock
│ └── app.ts｜tsx
├── src
│ ├── .umi
│ ├── .umi-production
│ ├── layouts
│ │ ├── BasicLayout.tsx
│ │ ├── index.less
│ ├── models
│ │ ├── global.ts
│ │ └── index.ts
│ ├── pages
│ │ ├── index.less
│ │ └── index.tsx
│ ├── utils // 推荐目录
│ │ └── index.ts
│ ├── services // 推荐目录
│ │ └── api.ts
│ ├── app.(ts|tsx)
│ ├── global.ts
│ ├── global.(css|less|sass|scss)
│ ├── overrides.(css|less|sass|scss)
│ ├── favicon.(ico|gif|png|jpg|jpeg|svg|avif|webp)
│ └── loading.(tsx|jsx)
├── node_modules
│ └── .cache
│ ├── bundler-webpack
│ ├── mfsu
│ └── mfsu-deps
├── .env
├── plugin.ts
├── .umirc.ts // 与 config/config.js 文件 2 选一
├── package.json
├── tsconfig.json
└── typings.d.ts
|
config 主要存放前端配置文件定义，通过 export default defineConfig({})的方式汇总所有的配置并交给umi框架管理
dist不用多说了，打包后的目录，直接丢到ng上进行转发即可
mock目录存放umi mock服务的数据源，此目录下所有 .ts / .js 文件会被 mock 服务加载，从而提供模拟数据
src存放主要js代码
public目录存放固定的静态资源，如存放 public/image.png ，则开发时可以通过 /image.png 访问到
src目录
app.js
这是umi约定的运行时配置文件，和普通的开发配置的区别在于运行时配置的逻辑在浏览器端运行
一些常用到的配置如下：
- onRouteChange：在初始加载和路由切换时被调用
- patchClientRoute：修改被 react-router 渲染前的树状路由表
全局布局
Umi中约定，在项目工程的 src/layouts/index.js 中声明全局路由布局
global.js
在应用前置，全局运行的逻辑
global.css|less
全局样式文件（优先级在第三方组件库的样式之后）
当需要覆盖第三方组件库样式的时候，需要用overrides.css
路由
配置式路由
这边主要说一个比较常见的子路由配置方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| export default {
routes: [
{ path: '/login', component: 'login' },
{
path: '/',
component: '@/layouts/index',
routes: [
{ path: '/list', component: 'list' },
{ path: '/admin', component: 'admin' },
],
},
],
}
|
上述js的含义就是，对于 / 的路由，访问 /list 和 /admin 就会带上 src/layouts/index 这个 layout 组件