【UmiJS 3.x入门】

目录

1.定义

2.特点

3.搭建umi项目

4.路由分类

5.新建页面

6.页面跳转

7.路径传值

8.解析路径传值

9.请求接口

10.使用本地测试数据

11.使用umi项目自带的antd-mobile样式库

umi定位

插件化的企业前端应用框架

umi特点

可扩展：拥有完整的生命周期

开箱即用

企业级：经历过众多公司项目验证

大量自研

完备路由（react-router-dom@6）：配置式路由和约定式路由

面向未来

搭建umi项目

1.查看node版本，要求10.0以上版本

node -v

2.安装yarn

npm i yarn -g

3.创建一个空文件夹

右击新建文件umi-app,cmd进入黑窗口

4.通过命令创建项目

yarn create @umijs/umi-app

5.控制台输入yarn补全node_module文件

6.运行项目

yarn start

路由分类

约定式路由

默认访问pages文件夹下的index.tsx

配置式路由

在umirc.ts中配置路由

新建页面

在src目录下创建pages文件夹，在pages文件夹下新建.tsx文件，作为新建的页面

页面跳转

通过link

//导入link组件
import { Link } from 'umi';

export default () => (
  <Link to="/list">Go to list page</Link>
);

通过history

//方式1：通过 history 使用，通常在事件处理中被调用
//导入history
import { history } from 'umi';

function goToListPage() {
  history.push('/list');
}

//方式2：直接从组件的属性中取得 history
export default (props) => (
  <Button onClick={()=>props.history.push('/list');}>Go to list page</Button>
);

路径传值

history.push({pathname:'/home',query:{name:'123'}})

 解析路径传值

方式1：

通过继承来的props中的属性来获取路径中传递的值

export default function List(props:any){
    console.log(props)
    return(
        <div>list</div>
    )
}

 方式2：

通过umi中的useLocation来获取路径参数

import {useLocation} from 'umi'
export default function List(props:any){
    let l=useLocation()
    console.log(l)
    return(
        <div>list</div>
    )
}

请求接口

利用umi中的request来发送请求

import {request} from 'umi'
import {useEffect} from 'react'

export default function List(props:any){
    useEffect(()=>{
        request('http://elm.cangdu.org/v1/cities?type=hot').then((res)=>{
            console.log(res)
        })
    },[])
    return(
        <div>list</div>
    )
}

使用本地测试数据

需要开启mock

在umirc.ts文件中：

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  //开启mock
  mock:{},

  routes: [
    { path: '/', component: '@/pages/index' },
    { path: '/list', component: '@/pages/list' },
  ],
  fastRefresh: {},
});

 请求的接口路径改变：

import {request} from 'umi'
import {useEffect} from 'react'

export default function List(props:any){
    useEffect(()=>{
        request('/api/users').then((res)=>{
            console.log(res)
        })
    },[])
    return(
        <div>list</div>
    )
}

在mock文件夹下新建api.js文件，文件中写入类似如下内容：

export default{
    //支持值为Object和Array
    'GET/api/users':{users:[1,2]},

    //GET可忽略
    '/api/users/1':{id:1},

    //支持自定义函数
    'POST/api/users/create':(req,res)=>{
        //添加跨域请求头
        res.setHeader('Access-Control-Allow-Origin','*');
        res.end('ok');
    },
}

 即可实现本地模拟数据的使用

使用umi项目自带的antd-mobile样式库

1.更新集合管理插件preset-react

yarn add @umijs/preset-react -S

2.按需导入需要的组件

import {Button} from 'antd-mobile'

 3.在jsx语法中书写对应的标签

<Button color='success'>Success</Button>

总结

以上就是umi框架的基本用法，希望对刚刚接触umi的你有所帮助