umi框架应用

阿里系提供企业级框架： Umi

项目简介

后台管理系统 — 中台

1. 技术栈

2. umi + react全家桶 + typescript + antd + axios + ahooks …

3. 项目目录介绍

   1. mock
      1. 模拟数据
   2. node_modules 依赖包
   3. src 源代码开发目录
      1. .umi 临时文件，不要做改动
      2. pages 页面
   4. .editorconfig 编辑器的记录文件
   5. .gitignore git上传忽略配置文件
   6. .prettierignore 忽略格式化配置文件
   7. .prettierrc 格式化配置文件
   8. .umirc.ts 项目配置文件，类似vue中的vue.config.js
   9. package.json 项目记录文件
   10. README.md 项目说明书
   11. tsconfig.json ts配置文件
   12. typings.d.ts ts的类型声明文件
   13. yarn.lock 插件版本锁定文件

项目构建方式

准备工作

环境准备

1. node版本 10.13 以上

2. 安装yarn 和 tyarn(国内镜像源) 包管理工具

   $ cnpm i yarn tyarn -g

脚手架

1. 创建项目空文件夹

   $ mkdir myapp && cd myapp

2. 通过官方工具创建项目

   $ yarn create @umijs/umi-app

1. 构建界面使用插件

   @umijs/plugin-layout

   使用文档：https://umijs.org/zh-CN/plugins/plugin-layout

2. 构建时配置

   新建根目录/config/config.ts

   export const config = defineConfig({
   layout: {
   name: 'Ant Design',
   locale: true,
   layout: 'side',
   },
   });
   

   在根目录的 .umirc.ts 下导入config.ts

   import { config } from "./config/config";
   export default config
   

3. 运行时配置

   在 src/app.tsx的 export const layout = ({}) 中做如下配置:

   **注：**配置之前需要构建头部和底部组件

   import React from 'react';
   import Footer from './components/Footer';
   import HeadTitle from './components/HeadTitle';
   
   export const layout = () => ({
     rightContentRender: () => <HeadTitle />,
     // 右侧头部组件
     footerRender: () => <Footer />,
     // 底部组件
     onPageChange: () => {
       // !! 路由监听
       // !! 路由改变触发该事件，一般用于做登录的页面路由拦截和重定向
     },
   });
   

4. 路由配置

   Layout 插件会基于 umi 的路由实现路由跳转功能

   新建 config/route.ts 路由表

   export const route: IBestAFSRoute[] = [
     {
       path: '/welcome',
       component: '对应组件地址',
       name: '欢迎', 
       icon: 'testicon',
       stores:[ //二级子路由
           path:'',
           component:'',
           ...
       ]  
       target: '_blank',// 新页面打开
       headerRender: false, // 不展示顶栏
       footerRender: false, // 不展示页脚
       menuRender: false,// 不展示菜单
     },
   ];
   

5. 全局样式

   Umi 中约定 src/global.less为全局样式，此文件，会被自动引入到入口文件最前面

   // 用于覆盖样式
   .ant-select-selection {
     max-height: 51px;
     overflow: auto;
   }