umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

时间:2024-04-04 14:53:39

umiJS

Umi 是蚂蚁金服的底层前端框架 中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备。同时有强大的插件扩展各种功能

什么时候不用 umi

需要支持 IE 8 或更低版本的浏览器
需要支持 React 16.8.0 以下的 React
需要跑在 Node 10 以下的环境中
有很强的 webpack 自定义需求和主观意愿
需要选择不同的路由方案

使用

确保电脑上有nodejs 10.13 或以上

umi下载安装

npm install -g umi 全局安装
查看版本 umi -v
安装项目 npm或yarn create @umijs/umi-app
安装依赖 cnpm install 或 yarn
启动项目 npm 或 yarn start
运行 http://localhost:8000

HTML模板

修改默认模板
新建 src/pages/document.ejs(文件必须是这个明治),umi 约定如果这个文件存在,会作为默认模板
作用:如果要引用第三方js/css文件 可以直接在HTML模板中进行配置。有很多第三方的插件都没有react版本的 所以采用import的方式是没有办法进行引用的 也就只能采取上面的方式进行引用

尝试引用第三方jquery

jquery CDN:https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

在页面直接打印,可以发现已经引进来了,可以之直接在页面使用
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

页面创建

umi g命令创建页面或者组件
在项目根路径下执行
umi g page xxx(要创建页面名)或umi g page xxx/xxx
umi g page xxx --typescript --less 创建ts页面与less

配置路由

一、配置式路由

1、在项目跟目录下找到".umirc.tc"在集中配置配置式路由

重定向:redirect
精准匹配:exact
当前页面标题:title
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

2、在对应的一级路由页面配置路由出口

umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

二、约定式路由

1、删除项目下".umirc.ts"或者将这个文件重新换个名字也行,只要不叫现在这个名字就行。
_layout.tsx为一级路由页面,二级路由不用改变正常命名就行
按照以图中pages文件夹下的格式配置约定式路由,
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

约定式路由传参

不清楚useEffect可以看一下Hooks,这里简单的提一下
useEffect:函数组件中没有生命周期,在函数组件中可以用useEffect来代替,可以将useEffect看作react生命周期中的componentDidMount、componentDidUpdate、componentWillUnmount这三个函数的组合
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等
在浏览器输入:http://localhost:8000/shop/随便传递的参数
可以看到下面的截图,控制台打印出来了传递过来的参数
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

声明式编程式跳转

umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

编程式跳转

语法:history.push()
:类组件也需要引入history
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等