title: UmiJS基础
date: 2022-09-12 19:20:27
tags:

React
框架
UmiJS
categories:
框架

UmiJS

介绍

官方文档

可扩展

Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
开箱即用

Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
企业级

经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。
大量自研

包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。
完备路由

同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
面向未来

在满足需求的同时，我们也不会停止对新技术的探索。比如 modern mode、webpack@5、自动化 external、bundler less 等等。

快速上手

安装

创建空目录

kdir myapp && cd myapp

使用官方提供脚手架

yarn create @umijs/umi-app

安装依赖

yarn start

部署发布-----打包好的文件生成在dist文件下

yarn build

项目目录

- .editorconfig     // 对编辑器的默认配置
- .gitignore        // git忽略文件配置
- .prettierignore   // 代码格式化忽略的文件
- .prettierrc       // 代码格式化的配置
- .umirc.ts         // umijs核心配置文件
- package.json      // 依赖管理
- README.md         // 项目介绍
- tsconfig.json     // ts配置文件
- typings.d.ts      // ts类型文件

配置

Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件，支持 es6。一份常见的配置如下官方配置文档

export default {base: '/docs/',publicPath: '/static/',hash: true,history: {type: 'hash',},
}

路由配置

  routes: [{path: '/',component:'@/pages/index', // 路由模板title:'首页'},{path:'/list',redirect:'user/one' // 重定向},{path:'/user',component:'@/layouts/index', // 公共路由模板，子路由也会在其中通过{props.children}routes:[{path:'/user/one',component:'@/pages/index'},{path:'/user/two',component:'@/pages/user'}]}],

// jsx部分，公共路由模板，存放进layouts文件下return (<div><h1>Header</h1>{props.children}<h1>Footer</h1></div>)

拦截

路由跳转可以进行拦截操作，当要跳转的时候拦截跳转至另一个组件

{path:'/user',component:'@/layouts/index', // 公共路由模板，子路由也会在其中通过{props.children}wrappers:['@/wrappers/auth' // 拦截路由],routes:[{path:'/user/one',component:'@/pages/index'},{path:'/user/two',component:'@/pages/user'}]
}

// wrappers/auth.jsximport React from 'react';
import { Redirect } from 'umi';const auth = (props:any) => {const isLoadin = false;if (isLoadin) { // 这部分功能可以实现当登陆状态为false强制跳转到首页return <div>{props.children}</div>}else{return <Redirect to="/"/>}
}export default auth

未知路径

当路径查找不到，可以设置默认路径

  routes: [{path: '/',component:'@/pages/index', // 路由模板title:'首页'},{path:'/list',redirect:'user/one' // 重定向},{path:'/user',component:'@/layouts/index', // 公共路由模板，子路由也会在其中通过{props.children}wrappers:['@/wrappers/auth'],routes:[{path:'/user/one',component:'@/pages/index'},{path:'/user/two',component:'@/pages/user'},{component:'@/pages/404'} // 当查找不到上方路径的时候，页面就会跳转到该组件路径]},{component:'@/pages/404'}// 当查找不到上方路径的时候，页面就会跳转到该组件路径],

传递参数

 { path:'/user/one/:id?',component:'@/pages/index' },

以上都是配置式路由，而如果没有routes配置，则自动进入约定式路由，跟Next的page路由规则类似。src下的文件目录就是路由表，

Mock数据

新建文件mock/index.ts

export default {// 请求＋路径'GET /api/index':{id:1,name:'Tom',age:12},'GET /api/person':{id:2,name:'LiLi',age:22},
}

获取数据

// 点击触发的函数
const getData = async()=>{// 请求数据// 1.写法一// request('/api/index').then(res=>{//   console.log(res);// })// 2.写法二const data = await request('/api/person');console.log(data); }

Mockjs使用

官方文档：Mockjs文档

import mockjs from 'mockjs'; // 引入第三方库mockjsexport default {'GET /api/index':{id:1,name:'Tom',age:12},'GET /api/person':{id:2,name:'LiLi',age:22},'GET /api/tags':mockjs.mock({'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],})
}

关闭Mock

打开文件\Umijs\.umirc.ts,修改配置文件：

import { defineConfig } from 'umi';export default defineConfig({...mock:false,  // 关闭mock...
});

使用环境变量方式关闭

  "scripts": {..."start:nomock":"MOCK=none umi dev",...},

配合DvaJS

官网

新建\pages\dva.tsx组件

// 1.创建一个UI组件
// 2.创建 model
// 3.将UI组件和model进行链接import React from 'react';import { connect } from 'umi';
import { Button } from 'antd';const dva = (props) => {console.log(props);const {dispatch} = props;const getData = ()=>{// 使用model更新获取数据dispatch({type:'tags/fetchTags',  // model的命名空间 / 方法payload:null})}return (<div><h1>Dva组件</h1><Button onClick={getData}>获取列表数据</Button></div>)
}export default connect(( {tags} )=>({tags}))(dva);

新建\src\models\tags.ts文件

import { request } from "umi"
// 获取标签数据
const getTags = ()=>{return request('/api/tags')
}export default {// 效用model的时候,通过命名空间调用,不要和其他model同名namespace: 'tags',// 状态,跟react中的state类似,和redux中保存的state一样state: {tagsList:[]},// 调用服务端接口,获取数据effects: {// payload：UI调用model传递的参数// callback：回调函数，执行其他操作就可以使用这个回调函数// put：将数据传递给reducers// call：访问外部的方法*fetchTags({payload,callback},{put,call}){// 获取tags数据const response = yield call(getTags)// 调用reducers,传递数据yield put({type:'setTagList', // 类似于redux中action的typepayload:response})}},// 更新 statereducers: {setTagList(state,action){return {...state,tagsList:action.payload}}},
}

运行时配置

runtime-config 和 config 之间的区别在于执行时间，runtime-config 是在您的应用程序在浏览器中运行时评估的。因此，function可以使用jsx、import和其他浏览器可运行的片段。

新建文件src/app.tsx

代码示例(不代表所有功能)：

import {history} from 'umi';
// 定义额外路由变量
let extraRoutes;// 动态添加路由
export function patchRoutes({ routes, routeComponents }) {console.log('patchRoutes', routes, routeComponents);routes.unshift({path:'/foo',component:require('@/pages/user1').default})// 合并服务端返回的路由extraRoutes.map(item=>{routes.unshift({path:item.path,component:require(`@/pages${item.component}`).default})})
}// 复写 render 会在patchRoutes之前执行
export function render(oldRender) {// 模拟从服务端请求获得的 路由extraRoutes = [{path:'/server',component:'/user2'}]// 在渲染之前 进行权限校验const isLoading = true; // 模拟 登录/未登录 状态if(!isLoading){history.push('/login')}oldRender();}// 在初始加载和路由切换时做一些事情,在patchRoutes之后执行
export function onRouteChange({ location, clientRoutes, routes, action }) {console.log(location,'01');console.log(clientRoutes,'02');console.log(routes,'03');console.log(action,'04');// console.log(location.pathname);}

使用Umi UI

安装：

yarn add @umijs/preset-ui -D

启动：

yarn start

UmiJS基础+UmiUI安装使用+Mock使用示例+DvaJS案例相关推荐

分布式大数据多维分析（OLAP）引擎Apache Kylin安装配置及使用示例
原文地址:http://lxw1234.com/archives/2016/04/643.htm Apache Kylin是一个开源的分布式分析引擎,提供Hadoop之上的SQL查询接口及多维分析(O ...
分布式大数据多维分析（OLAP）引擎Apache Kylin安装配置及使用示例【转】
Kylin 麒麟官网:http://kylin.apache.org/cn/download/ 关键字:olap.Kylin Apache Kylin是一个开源的分布式分析引擎,提供Hadoop之上的 ...
在安装了Sql2000的基础上安装Sql2005的详细过程
在安装了Sql2000的基础上安装Sql2005的详细过程 2008-09-04 19:10 在安装了Sql2000的基础上安装Sql2005的详细过程 Sql2005版本:Sql2005开发版,两张 ...
DPI — nDPI — 安装部署与应用示例
目录文章目录目录 nDPI 的安装 nDPI 的应用示例通过协议文件来扩展 nDPI 解析器处理 TLS 加密流量 nDPI 的安装 nDPI 支持在 Linux 平台运行,能够方便的将 nD ...
C#基础字符串读取/写入文本文件代码示例
C#基础字符串读取/写入文本文件代码示例写入文本文件: 1 class Program 2 { 3 static void Main(String[] args) 4 { 5 //写入strin ...
移动开发—Less基础与安装
移动开发-Less基础与安装一.维护CSS的弊端 CSS是一门非程序式语言.没有变量.函数.SCOPE(作用域)等概念 CSS需要书写大量看似没有逻辑的代码.CSS的冗余度是比较高的不方便维护扩展 ...
SLAM导航机器人零基础实战系列：（一）Linux基础——2.安装Linux发行版ubuntu系统
SLAM导航机器人零基础实战系列:(一)Linux基础--2.安装Linux发行版ubuntu系统摘要由于机器人SLAM.自动导航.语音交互这一系列算法都在机器人操作系统ROS中有很好的支持,所以 ...
台式机下成功在windows10的基础上安装Ubuntu 18.04 LTS 系统（详细教程）
台式机成功在windows10的基础上安装Ubuntu 18.04 LTS 系统 1 前言因为工作缘故经常需要使用windows和ubuntu两个不同的计算机系统,因此想把实验室的台式机安装成双系统 ...
win10的基础上安装win7
首先给大家说明哦!在安装双系统的时候是从大到小的安装哦,也就是在win10的基础上安装win7,要是反过来的话,你的win7会被win10覆盖掉哦.(我是亲身体会了的哦) 那么安装方法如下: 首先打开 ...

UmiJS基础+UmiUI安装使用+Mock使用示例+DvaJS案例