umi 项目配置

一、运行配置

约定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 使用

1. 创建注册文件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

​

最后

以上就是愉快小海豚为你收集整理的umi 项目配置的全部内容，希望文章能够帮你解决umi 项目配置所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。