潘鑫博客

乌米 UMI

11/11/2022 前端umi乌米
(adsbygoogle = window.adsbygoogle || []).push({});

# 简介

image Umi 官网：https://umijs.org/ GitHub：https://github.com/umijs/umi

  1. 蚂蚁的，基于react
  2. 免费企业级
  3. 建议学习乌米3
  4. 请求库用axios

# 不能使用umi

  • IE8或者更低浏览器

# 使用

可能网络不好会失败yarn前一共不到4kb

yarn create @umijs/umi-app
yarn
1
2

启用项目 yarn start

出现Page Index

添加layout，会增加左侧菜单







 






import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout:{},
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
});
1
2
3
4
5
6
7
8
9
10
11
12

# 项目目录结构

# mock

数据模拟调试

# src

.less文件，可以编程的css 约定式路由 根据目录结构生成路由

# 配置文件

.umirc.ts配置文件拆解 拆解后删除.umirc.ts文件，优先级更高

// config/config.ts

import { defineConfig } from 'umi';
import routes from './routes';

export default defineConfig({
  routes: routes,
  nodeModulesTransform: {
    type: 'none',
  },
  layout:{},
  mfsu: {},
  fastRefresh: {},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 路由配置

配置了name属性的路由，会自动在菜单里面显示

headerRender: false, // 不展示顶栏 footerRender: false, // 不展示页脚 menuRender: false, // 不展示菜单 menuHeaderRender: false, // 不展示菜单顶栏 `` ts // config/routes.ts

export default [ { // exact: true, path: '/', component: 'login/login.tsx', // name: '登录', menuRender: false, headerRender: false, // 不展示顶栏 footerRender: false, }, { // exact: true, path: '/sys', component: 'sys', name: '系统管理', access: "canSys", routes: [ {path: "/sys/user", component: "sys/user", name: '用户管理',access: "canSysUser"}, {path: "/sys/role", component: "sys/role", name: '角色管理',access: "canSysRole"} ] }, ];


``` ts

// config/routes.ts

export default [
    { exact: true, path: '/', component: 'index' },
];
1
2
3
4
5
6
7
8

MFSU有时候到99%%,正常

# 配置主题颜色

如果没生效：

  1. 强制刷新，Ctrl+F5
  2. 删除.umi 重新运行项目
  3. 清理火狐浏览器缓存文件






 
 
 











// config/config.ts

import { defineConfig } from 'umi';
import routes from './routes';

export default defineConfig({
  routes: routes,
  theme: {
    'primary-color': '#000000',
    'layout-body-background': '#1DA500'
  },
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {},
  mfsu: {},
  fastRefresh: {},
  
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# mock

Mock.js 前后端分离使用，个人感觉没有apifox好用 http://mockjs.com/0.1/ 安装 npm install mockjs

# 插件

# @umijs/plugin-initial-state

全局共享的，例如登录人信息 优势：不需要手动刷新render

// 运行时配置
// src/app.ts
export async function getInitialState(): Promise<API.ISystemInfo> {
    //应该用ajax从服务器获取公共的信息
    return Promise.resolve({systemName: "设计师工作台"});
}
1
2
3
4
5
6

# @umijs/plugin-initial-model

# 权限控制

https://pro.ant.design/zh-CN/docs/authority-management

//权限文件
// src/access.ts
export default function (initialState: any) {
    return {
        canSys: true,
        canSysUser: true,
        canSysRole: false,
    };
}
1
2
3
4
5
6
7
8
9

没有权限的页面，直接在菜单里面消失

直接访问没权限的url会报404页面 image

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=38dpnhkh4o8wo