引言笔者最近开发了一款umi插件：plugin-umi-cmdk[1],该插件的功能主要是：在umi项目里可以方便的集成cmd+k，实现菜单等搜索。主体功能并不复杂，但是在集成作为umi插件过程中踩了不少坑，主要是umi官方文档的， 开发插件|UmiJS[2]实属写得烂，看完之后根本无法上手。所以写一篇完整的插件开发教程，手把手上手umi插件开发。准备工作创建项目新建一个文件夹umi-plugin-demo，直接通过umi的官方模版进行创建。yarncreateumi之后选择模板的时候选择：UmiPlugin。创建example目录用于测试然后创建完之后在 umi-plugin-demo 的根
Umi4从零开始实现动态路由、动态菜单🍕前言🍔前期准备📃数据表🤗Mock数据🔗定义类型🎈开始🎃获取路由信息🧵patchRoutes({routes,routeComponents})📸生成动态路由所需的数据formattedRoutePathroutePathcomponentPathfilePath🍖生成动态路由数据及组件😋完成✨踩坑🍕前言近期在写Umi4的练习项目，计划实现一个从服务器获取路由信息并动态生成前端路由和导航菜单的功能。本文记录了相关知识、思路以及开发过程中踩到的坑。🍔前期准备📃数据表后端同学可以参考CREATETABLE`menus`(`id`INT(10)NOTNULLAU
Umi4从零开始实现动态路由、动态菜单🍕前言🍔前期准备📃数据表🤗Mock数据🔗定义类型🎈开始🎃获取路由信息🧵patchRoutes({routes,routeComponents})📸生成动态路由所需的数据formattedRoutePathroutePathcomponentPathfilePath🍖生成动态路由数据及组件😋完成✨踩坑🍕前言近期在写Umi4的练习项目，计划实现一个从服务器获取路由信息并动态生成前端路由和导航菜单的功能。本文记录了相关知识、思路以及开发过程中踩到的坑。🍔前期准备📃数据表后端同学可以参考CREATETABLE`menus`(`id`INT(10)NOTNULLAU
今天想使用ui，出现了很多错误，刚开始安装的时候没有一点事，就是运行的时候报错，好像和umi版本不匹配了，后来又把umi删除了又安装一遍，然后还是运行不了，后来我又把@umijs/preset-ui卸了，之后就又安装不上了。更改运行代码为：npminstall@umijs/preset-ui--legacy-peer-deps报错原因：在新版本的npm中，默认情况下，npminstall遇到冲突的peerDependencies时将失败。解决方法：使用–force或–legacy-peer-deps可解决这种情况。–force会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版
今天想使用ui，出现了很多错误，刚开始安装的时候没有一点事，就是运行的时候报错，好像和umi版本不匹配了，后来又把umi删除了又安装一遍，然后还是运行不了，后来我又把@umijs/preset-ui卸了，之后就又安装不上了。更改运行代码为：npminstall@umijs/preset-ui--legacy-peer-deps报错原因：在新版本的npm中，默认情况下，npminstall遇到冲突的peerDependencies时将失败。解决方法：使用–force或–legacy-peer-deps可解决这种情况。–force会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版
新项目用umi4-max搭建，部分功能想要使用其他项目的功能，不想重新开发，想到了使用webpack5的联邦模块，可以直接引用其他项目代码来实现共享代码。理想很美好，现实很残酷。直接按照webpack5联邦模块的使用方法，并不能成功，而官方文档没有明确说明如何使用。webpack联邦模块如何使用呢？理解：使用场景：项目A有一个功能，项目B也想用。此时可以用。使用前提：依赖webpack5，且主要依赖相同（如都依赖react)说明：项目A需要用项目B的代码，项目A为导入项目，项目B为导出项目。相关配置字段说明：字段名类型含义namestring必传值，即输出的模块名，被远程引用时路径为name/
新项目用umi4-max搭建，部分功能想要使用其他项目的功能，不想重新开发，想到了使用webpack5的联邦模块，可以直接引用其他项目代码来实现共享代码。理想很美好，现实很残酷。直接按照webpack5联邦模块的使用方法，并不能成功，而官方文档没有明确说明如何使用。webpack联邦模块如何使用呢？理解：使用场景：项目A有一个功能，项目B也想用。此时可以用。使用前提：依赖webpack5，且主要依赖相同（如都依赖react)说明：项目A需要用项目B的代码，项目A为导入项目，项目B为导出项目。相关配置字段说明：字段名类型含义namestring必传值，即输出的模块名，被远程引用时路径为name/
