Umi3笔记

QLUGCL

已于 2024-01-14 11:01:28 修改

阅读量1.2k

点赞数

文章标签：笔记前端 umi 前端框架

于 2023-06-09 22:40:49 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43813373/article/details/131134817

版权

本文详细介绍了Umi3框架，包括其初始化、目录结构、配置方式、HTML模版、antd集成、资源引入、样式模块化、函数式组件编写、路由与权限管理、本地模拟数据、反向代理、dva状态管理和权限校验等内容，揭示了Umi3如何提供高效、便捷的前端开发体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

UMI文档

Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展（连锁反应）。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

UMI 的主要用途包括：

路由管理：UMI 提供了强大的路由功能，可以通过配置文件定义路由规则，支持动态路由、嵌套路由、权限控制等。
状态管理：UMI 集成了 dva 数据流方案，可以帮助开发者更好地组织和管理应用的状态，并提供了一套便捷的数据流操作方式。
插件扩展：UMI 支持通过插件机制进行功能扩展，可以使用丰富的插件来增强开发体验和功能特性，例如国际化、样式处理、代理转发等。
构建工具：UMI 集成了 webpack 和 babel，提供了开箱即用的构建工具，支持代码打包、优化、压缩等功能。
脚手架：UMI 提供了一套完整的项目脚手架，可以快速初始化项目结构，并提供了丰富的模板和示例，帮助开发者快速上手和开发。

总的来说，UMI 提供了一种高效、便捷的前端开发模式，帮助开发者在复杂的应用开发中提高效率，同时具备良好的可维护性和可扩展性。

Umi初始化

初始化umi项目框架结构等。


 - mkdir myapp && cd myapp
 - npm create @umijs/umi-app
 - npm install
 - npm start：启动项目
 - npm run build：打包项目到dist

目录结构

配置复杂时用config/config.js,简单时用自带的 .umirc.js。
umi默认目录结构


├── dist/                          // 默认的打包build 输出目录：npm run build
├── mock/                          // mock 文件所在目录，基于 express
├── public/                         // 变通的数据资源目录和一些无需打包的资源
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二选一
└── src/                           // 源码目录，可选
    ├── layouts/index.js           // 全局布局
    ├── models                       // 数据流，自动识别models     
    ├── components              // 全局通用组件 
    ├── wrappers                  // 权限管理
    ├── pages/                     // 页面目录，里面的文件即路由
        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       // build 临时目录，会自动删除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1，任意命名，导出 react 组件
        ├── index2.tsx            // 页面 2，任意命名，导出 react 组件    
        ├── page1.test.js          // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js               // 页面 2，任意命名
    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
    ├── app.js                     // 动态：运行时配置文件
├── .umirc.js                      // 静态：umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json

配置文件解析

Umi-—前端应用框架（Umi基础）

mock 存储 mock 文件，此目录下所有 js 和 ts 文件会被解析为 mock 文件。

node_modules 依赖包目录。

.editorconfig让使用不同编辑器的开发者在共同开发一个项目时“无痛”地遵循编码规范(编码风格)，就可以使用EditorConfig插件，会在项目根目录寻找.editorconfig文件并使用其中定义的编码风格。

.gitignore 是一个隐藏文件，就跟这个文件的字面意思一样，它指明了在用 git上传文件的时候需要忽略哪些文件。

.prettierrc在vscode使用右键格式化的时候,会自动帮我们补全一些符号,但有些符号在eslint中就会报语法错误,可以通过在根目录创建.prettierrc文件来进行文件配置

.umirc.ts 配置文件，包含 umi 内置功能和插件的配置。

package-lock.json 锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。

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

tsconfig.json 如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。
tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。

typings.d.ts 用 ts 写的模块在发布的时候仍然是用 js 发布，这就导致一个问题：ts 那么多类型数据都没了，所以需要一个
d.ts 文件来标记某个 js 库里面对象的类型。

配置

.umirc.ts==config/config.js

.umirc.ts

import {
    defineConfig } from 'umi';

export default defineConfig({
   
  nodeModulesTransform: {
   //node_modules目录下依赖文件的编译方式。
    type: 'none',//all（慢兼容性好）和none（快兼容性不好）:全体编译和必要编译
  },
  routes: [
    {
    path