umi学习（umi4）

umi 官方文档

官方建议使用 pnpm

node版本在 14 以上

创建项目：

根据包管理工具不同，官方推荐

这里使用 pnpm：

1. pnpm dlx create-umi@latest

2. 选择模板（这里使用 Simple App）想对module处理需要使用 Ant Design Pro版本

3. 选择包管理工具（这里使用pnpm）

4. 选择源（这里使用taobao）

5.启动项目 pnpm dev

路由：

约定式路由：

在 src/layouts/index.jsx 入口文件(相当于vue 的App.vue) 使用 Link 和 Outlet 指定
再 src/pages/xxx.jsx 在pages目录下写对应的地址的同名组件即可跳转，含 404
不需要在config/config.js 或者 umirc.ts 中写 routes 路由表
再 src/.umi/core/route.tsx 中可以查看自动生成的路由表

src/layouts/index.jsx:
import { Link, Outlet } from 'umi';
import styles from './index.less';
export default function Layout() {
  return (   Home 
  Docs 
  aaa 
  bbb 
  Github 
 
  );
}
src/pages:

config/config.ts:
import { defineConfig } from "umi";
export default defineConfig({
  // routes: [
  //   // { path: "/", component: "index" },
  //   // { path: "/docs", component: "docs" },
  // ],
  npmClient: 'pnpm',
});
配置式路由：

在配置文件中通过 routes 进行配置，格式为路由信息的数组。

例如：
export default {
  routes: [
    { path: '/', component: 'index' },
    { path: '/user', component: 'user' },
  ],
}
参数：配置路由

path 地址
component pages目录下的地址
routes 子路由
redirect 重定向
wrappers 配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。比如，可以用于路由级别的权限校验

跳转：

withRouter高阶组件可以拿到 histroy location match 等

import { useNavigate, Navigate, history } from "umi";
const OrderPage = () => {
    
     v6版本:
     navigate('/xxx')
     navigate(-1)
     navigate(1)
     navigate('/xxx',{replace:true,state:{...}})
     navigate({
        pathname:'/xxx',
        search:'xxx=xxx&xxx=xxx'
     })
     ---
     页面中只要遇到组件，就可以实现跳转!!
     
    const navigate = useNavigate();
    const handle = () => {
         navigate({
            pathname: '/personal/profile',
            search: 'lx=0&name=zhufeng'
        }); 
         // history:go/goBack/goFoward/push/replace
        history.push({
            pathname: '/personal/profile',
            // search: 'lx=0&name=zhufeng',
             在我们开启了historyWithQuery配置项之后，就可以使用query对象进行传递了「但是不适合于navigate这种方式」
            query: {
                lx: 0,
                name: 'zhufeng'
            }
        }); 
        
         v6的隐式传参：即便目标组件刷新，传递的信息还在「纯正的v5版本中，目标组件一刷新，则隐式传递的信息消失了」
        navigate('/personal/profile', {
            state: {
                lx: 0,
                name: 'zhufeng'
            }
        }); 
        
         我们获取的history对象和纯正v5中的history对象是有区别的，主要在于隐式传参这个方面！！ -> 向v6中的navigate看齐的！！
         history.push('/personal/profile', {
            lx: 0,
            name: 'zhufeng'
        }); 
    };
    return (
        
            我的订单  );
};
export default OrderPage;

三大脚手架的区别

React工程化开发：
  1. create-react-app
    + 脚手架的配置
      $ yarn eject 暴露配置项
      直接在源码中或者package.json中进行修改
    + 路由管理
      想用哪个版本就用哪个版本
      但是约定式路由的模式、统一处理、权限校验等，都需要自己去实现！！
    + 数据管理
      自己基于redux/react-redux/redux-saga 或者 mobx实现状态管理
      操作起来很复杂
  2. dva-cli
    + 脚手架的配置
      基于roadhog进行webpack的配置
      在.webpackrc.js文件中，基于roadhog指定的方式去修改
    + 路由管理
      用的是v4版本「比较老」，react用的也是16
      默认就是约定式路由，但是统一处理及权限校验等，还是需要自己的去封装！！
    + 数据管理
      dva的灵魂所在就是对redux/redux-saga的封装
      创建并且注册Model层，操作起来非常的简单、方便！！
  3. create-umi@latest 或者 @ant-design/pro-cli「用的是@umi/max」
    + 脚手架的配置
      在config/config.ts中（或者.umirc.ts中），按照umi提供的配置方式去修改配置项
      有启动和打包时候的配置：webpack配置修改、路由、页面模板的配置...
      也存在运行时的配置「app.ts」：配置dva、和路由的检测及动态管理、以及Layout页面的布局调整！！
    + 路由管理
      umi3是v5，umi4是v6（而且在v6的基础上，封账了和v5中类似的操作语法）
      路由全套机制，基本上都已经处理好了，我们只需要按照相关的说明去更改即可！！
    + 数据管理
      继承了dva的Model机制！！
  4. vite
    前三个脚手架，不论咋变，核心都是webpack处理！！
    vite是基于rollup实现打包的「和webpack不是同一个东西」！！
    特点：比webpack快很多很多！！尤其是开发环境下！！
脚手架的配置需要我们考虑的事情：
  + 基础配置：入口、出口相关的操作
  + less等预编译语言的处理
  + 浏览器兼容处理
    + ES6语法、CSS3语法
    + ES6内置API
  + 响应式适配
    + 修改babel-plugin：babel-plugin-styled-components-px2rem
    + 修改postcss-plugin：postcss-px2rem
  + 跨域代理
  + ...

Ant Design Pro

开始使用 - Ant Design Pro

config.ts的配置：

// https://umijs.org/config/
import { defineConfig } from '@umijs/max';
import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routes from './routes';
const { REACT_APP_ENV = 'dev', NODE_ENV } = process.env;
export default defineConfig({
  /**
   * @name 常规配置
   */
  title: "CMS内容管理系统",
  targets: {
    ie: 11
  },
  hash: true,
  devtool: false,
  inlineLimit: 10000,
  jsMinifier: 'terser',
  publicPath: NODE_ENV === 'production' ? './' : '/',
  /**
   * @name 路由的配置
   * @doc https://umijs.org/docs/guides/routes
   */
  historyWithQuery: {},
  history: {
    type: 'hash'
  },
  routes,
  /**
   * @name 主题的配置
   * @doc antd的主题设置 https://ant.design/docs/react/customize-theme-cn
   * @doc umi 的theme 配置 https://umijs.org/docs/api/config#theme
   */
  theme: {
    'root-entry-name': 'variable'
  },
  /**
   * @name 代理配置
   * @see 要注意以下 代理只能在本地开发时使用，build之后就无法使用了
   * @doc 代理介绍 https://umijs.org/docs/guides/proxy
   * @doc 代理配置 https://umijs.org/docs/api/config#proxy
   */
  proxy: proxy[REACT_APP_ENV as keyof typeof proxy],
  /**
   * @name 快速热更新配置
   * @description 一个不错的热更新组件，更新时可以保留state
   */
  fastRefresh: true,
  //============== 以下都是max的插件配置 ===============
  /**
   * @name 数据流插件
   * @@doc https://umijs.org/docs/max/data-flow
   */
  model: {},
  /**
   * 一个全局的初始数据流，可以用它在插件之间共享数据
   * @description 可以用来存放一些全局的数据，比如用户信息，或者一些全局的状态，全局初始状态在整个 Umi 项目的最开始创建。
   * @doc https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81
   */
  initialState: {},
  /**
   * @name layout 插件
   * @doc https://umijs.org/docs/max/layout-menu
   */
  layout: {
    locale: false,
    ...defaultSettings
  },
  /**
   * @name antd 插件
   * @description 内置了 babel import 插件
   * @doc https://umijs.org/docs/max/antd#antd
   */
  antd: {},
  /**
   * @name 网络请求配置
   * @description 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
   * @doc https://umijs.org/docs/max/request
   */
  request: {},
  /**
   * @name 权限插件
   * @description 基于 initialState 的权限插件，必须先打开 initialState
   * @doc https://umijs.org/docs/max/access
   */
  access: {}
});

分类:热门推荐日期:2024-03-09浏览:1评论:0

创建项目：

路由：

约定式路由：

配置式路由：

跳转：

三大脚手架的区别

Ant Design Pro

config.ts的配置：

路由 组件

相关推荐