UmiJS基础&UmiJS+Dva

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

1️⃣了解Umi

你可以将Umi简单的理解为一个专注性能的类 next.js 前端框架，并通过约定、自动生成和解析代码等方式来辅助开发，减少我们开发者的代码量。

功能特点

• 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。
• 完善的插件体系，Umi 实现了完整的生命周期，并使其插件化。此外还提供针对 React 的集成插件集。
• 完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。

技术收敛

《蚂蚁金服前端框架和工程化实践 》

蚂蚁金服前端框架


Umi把大家常用的技术栈进行整理，收敛到一起，让大家只用 Umi 就可以完成 80% 的日常工作。

Bigfish 企业级前端开发框架，与常见的前端框架和工具不同，它从工程角度集成了各类功能，从初始化开发到最终上线整套技术方案，解决了前端开发经常遇到的前端技术栈整合配置麻烦、开发联调麻烦、前端资源发布上线麻烦三大痛点。

创建第一个Umi应用

# 使用 yarn 管理 npm 依赖 使用国内源 之后使用tyarn代替yarn即可
$ npm i yarn tyarn -g
# 创建目录
$ mkdir myapp
# 进入目录
$ cd myapp
# 通过官方工具创建项目
$ yarn create @umijs/umi-app
# 安装依赖
$ yarn
# 启动开发
$ yarn start


启动页面效果 和 当前项目结构

.umi 临时文件

.umi 临时目录是整个 Umi 项目的发动机，你的入口文件、路由等等都在这里，这些是由 umi 内部插件及三方插件生成的。

+ .umi
+ core # 内部插件生成
+ pluginA # 外部插件生成
+ presetB # 外部插件生成
+ umi.ts # 入口文件


临时文件是 Umi 框架中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。

你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 umi 时都会被删除并重新生成。

修改配置换个页面布局

默认的脚手架内置了 @umijs/preset-react，包含布局、权限、国际化、dva、简易数据流等常用功能。

想使用 ant-design-pro 的布局

1. 添加@ant-design/pro-layout依赖

yarm add @ant-design/pro-layout


2. 编辑 .umirc.ts文件，加入布局配置项 +layout:{},

import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
layout:{},
routes: [
{ path: '/', component: '@/pages/index' },
],
fastRefresh: {},
});


部署发布