umi 项目配置

最新推荐文章于 2024-06-10 09:32:29 发布

langyanyanglei

最新推荐文章于 2024-06-10 09:32:29 发布

阅读量1.5w

点赞数 3

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_42114897/article/details/105408011

版权

react 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

一、运行配置

约定src/app.tsx为运行配置

配置项目

1.patchRoutes 修改路由，可获得整个路由系统

export function patchRoutes({ routes }) {
  routes.unshift({
    path: '/foo',
    exact: true,
    component: require('@/extraRoutes/foo').default,
  });
}

2.render 复写render,可做权限效验等需要在渲染前完成的操作

import { history } from 'umi';
export function render(oldRender) {
  fetch('/api/auth').then(auth => {
    if (auth.isLogin) { oldRender() }
    else { history.redirectTo('/login'); }
  });
}

3.onRouteChange（{routes，matchedEoutes,location,action}）

路由初始加载和路由改变时触发

  bacon(location.pathname);
}

二、插件配置

1.@umijs/plugin-initial-state

1.1启动方式

有src/app.tsx 并且到处getInitialState方法时启用

1.2运行配置

getInitialState

// src/app.ts
export async function getInitialState() {
  const data = await fetchXXX();
  return data;
}

如果要做权限拦截，此函数会最开始执行，获取权限数据之后,layout、access插件可以获取这个数据
参考链接：
https://github.com/umijs/plugin-access

2.@umijs/plugin-access

2.1启用方式

有src/access.ts时启用

2.2运行配置，导出一个权限对象

// src/access.ts
export default function(initialState) {
  const { userId, role } = initialState;
  return {
    canReadFoo: true,
    canUpdateFoo: role === 'admin',
    canDeleteFoo: foo => {
      return foo.ownerId === userId;
    },
  };
}

initialState 是通过@umijs/plugin-initial-state返回的数据，可以用此数据进行权限判断

2.3 扩展路由权限拦截配置

export const routes =  [
  {
    path: '/pageA',
    component: 'PageA',
    access: 'canReadFoo', // 权限定义返回值的某个 key
  }
]

配合layout插件可以实现页面权限的控制，如上图，配置了access ,只有拥有canReadFoo的权限，才能访问页面，否则会默认渲染layout的内置权限错误页面（在layout插件之外设置无效）

2.4 权限组件获取权限信息

useAccess

import React from 'react';
import { useAccess } from 'umi';
const PageA = props => {
  const { foo } = props;
  const access = useAccess();     access 值为 access.ts返回配置的权限对象
  if (access.canReadFoo) {
    // 如果可以读取 Foo，则...
  } 
  return (
    <div>
      <Access
        accessible={access.canReadFoo}
        fallback={<div>Can not read foo content.</div>}
      >
        Foo content.
      </Access>
      <Access
        accessible={access.canUpdateFoo}
        fallback={<div>Can not update foo.</div>}
      >
        Update foo.
      </Access>
      <Access
        accessible={access.canDeleteFoo(foo)}
        fallback={<div>Can not delete foo.</div>}
      >
        Delete foo.
      </Access>
    </div>
  );
};
export default PageA;

Access

组件可以进行应用权限控制,属性如下：

accessible boolean

是否有权限，通过通过useAccess获取后传入进来

fallback React.ReactNode

无权限的显示，默认无权限不显示任何内容

chidren React.ReactNode

有权限时的显示

useAccess()的返回值access就是第三步中定义的权限集合，可以利用它进行组件内代码执行流的控制。 `` 组件拥有accessible和fallback两个属性，当accessible为true时会渲染子组件，当accessible为false会渲染fallback属性对应的ReactNode

3.@umijs/plugin-layout

3.1启用方式

配置开启

3.2layout配置

官方示例：

import { defineConfig } from 'umi';
export const config = defineConfig({
  layout:{
    name: 'Ant Design'; 
    locale: true;
  }
});

新建项目会有umirc.ts,可修改为

import { defineConfig } from 'umi';
export default defineConfig({
+  layout:{ 
+    name: 'Ant Design',
+    locale: true
+  },
  routes: [
    { path: '/', component: '@/pages/index', },
    {
      path: '/user', component: '@/pages/user',
      wrappers: ['@/wrappers/auth.js'],
    },
    { path: '/index1', component: '@/pages/index1',access: 'canReadFoo', },
  ],
});

layout配置参数：
name:  string   产品名称
logo:  string   logo
theme:  string  指定layout 主题，可选用 pro 和 tech(tech只有在蚂蚁内部框架Bigfish中生效)
locale:  boolean  是否开启国际化，开启后路由配置的菜单名会被当做菜单名国际化的key

如此设置会使用antd layout布局

3.3运行配置

export const layout = { 
  logout: () => {}, // do something 
  rightRender:(initInfo)=> { return 'hahah'; },// return string || ReactNode; 
};

运行参数：
logout： void
     用于运行时配置默认layout的UI中，点击退出登录的处理逻辑，默认不处理
rightRender:  (initialState) => React.ReactNode 
    默认展示用户名、头像、退出登录相关组件
onError： void
    发生错误的回调
ErrorComponent:  React.ReactElement
   默认的错误页面
headerRender： REact.ReactNode
   顶部菜单折叠提示语
menuHeaderRender: React.ReactElement
   左侧导航顶部展示内容
   参考如下：
    menuDataRender:() =>[       //此功能可以实现动态路由，用来渲染访问路由
      {
        path: '/',
        name: '路由模块1',
      },
      {
        path: '/',
        name: '路由模块2',
        children: [
          { path: '/index1', name: '路由模块2-1' },
          { path: '/user', name: '路由模块2-2' },
        ],
      },
    ],  
links: React.ReactNode
   左侧底部链接
   
参考链接： umi layout调用pro-layout,所有属性设置可以透传
 https://github.com/umijs/plugin-layout
 https://www.npmjs.com/package/@ant-design/pro-layout
 https://pro.ant.design/docs/layout-component-cn

3.4 路由扩展配置

export const routes: IBestAFSRoute[] =  [
  {
    path: '/welcome',
    component: 'IndexPage',
    menu: {
      name: '欢迎', // 兼容此写法
      icon: 'testicon',
    },
    layout:{
      hideNav: true,
    },
    access: 'canRead',
  }
]

路由相关参数：
name: string  菜单上显示额名称，没有不显示
icon: string   菜单上显示的icon
menu: false    sideMenu 相关配置，默认为false,表示在菜单中隐藏此项
  menu 可配置项：
    name : string   菜单名
    icon:  string    图标
    hideChildren: boolean  隐藏子项
    flatMenu: bolean     隐藏自身，展示子项
layout: false  默认展示选择的layout主题
   hideMenu:  boolean  是否隐藏左侧菜单，默认展示
   hideNav: boolean    是否隐藏到航头， 默认展示
access: string 
   结合@umijs/plugin-access插件时生效
   权限插件会进行权限匹配，如果权限值为false，次路由默认展示403页面

4.@umijs/plugin-dva

4.1启用方式

配置启用

约定式注册models,即src/models下的文件或者src/pages下，所有的models.ts文件都会默认为注册models（这一部分并未安照官方文档执行，直接使用dva的用法，官方文档说明有点不清楚）

4.1 hooks 使用方式

1.创建注册文件counter.ts

import { useState } from 'react';
export default () => {
  const [counter, setCounter] = useState(0);
  const increment = () => setCounter(c => c + 1);
  const decrement = () => setCounter(c => c - 1);
  return { counter, increment, decrement };
};

2.使用 hooks

import React from 'react';
import { useModel} from 'umi';
export default () => {
  // useModel 获取注册的models 
  const { counter, increment, decrement } = useModel('counter');  
  return (
    <div>
      <div>{counter}</div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

4.2 redux 使用

创建注册文件dvaModule.js

export default {
  namespace: 'products',
  state: [
    {
      id:1,
      name:222,
    },
    {
      id:2,
      name:222
    }
  ],
  reducers: {
    'delete'(state, { payload: id }) {

      return state.filter(item => item.id !== id);
    },
  },
};

2.使用redux

import React from 'react';
import { connect } from 'dva';

const dvaModule = ({ dispatch, products }) => {
  function handleDelete() {
    dispatch({
      type: 'products/delete',
      payload: 1,
    });
  }
  return (
    <div>
       <button onClick={() =>handleDelete()}>dva点击操作</button>
      {
        products.map((item) =>{
          return (
            <p>{item.id}</p>
          )
        })
      }
    </div>
  );
};

// connect 将models注册的products绑定到dvaMOdules中，绑定之后此组件直接可以使用rdux
export default connect(({ products }) => ({
  products,
  loading:false,   // dva-loading 
}))(dvaModule);

参考链接：
https://dvajs.com/guide/introduce-class.html#effect
https://zh-hans.reactjs.org/docs/hooks-reference.html

三、proxy 代理

export default {
  proxy: {
    '/api': {
      'target': 'http://jsonplaceholder.typicode.com/',
      'changeOrigin': true,
      'pathRewrite': { '^/api' : '' },
    },
  },
}
相关链接：https://umijs.org/zh-CN/config#presets

四.环境变量设置
4.1目录文件

默认根目录下.env文件

此配置并未按照官网配置

BABEL_CACHE=1111

4.2项目读取环境变量

const { BABEL_CACHE } = process.env;
console.log(BABEL_CACHE)

相关链接：
https://pro.ant.design/docs/environment-variables-cn

四、进阶配置

1.Umi ui

安装

$ yarn add @umijs/preset-ui -D
$ UMI_UI=1 umi dev

依赖安装完成之后重启项目，

进入 http://localhost:3000/tasks

langyanyanglei

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
umi 项目配置

一、运行配置约定src/app.tsx为运行配置配置项目1.patchRoutes 修改路由，可获得整个路由系统export function patchRoutes({ routes }) { routes.unshift({ path: '/foo', exact: true, component: require('@/extraRoutes/foo')...
复制链接

扫一扫