UI 插件开发
2.9.0+ 中支持初始化插件
你可以通过 create-umi 快速创建一个 UI 插件：
# npx create-umi --type=plugin
$ yarn create umi --type=plugin
在最后一步 是否有 Umi UI 选项中选择 Y，就创建了一个有 UI 交互的 umi 插件。
初始化 UI 插件后，目录结构如下：
- root
- src // 服务端 / Node 端代码
- index.js // 插件入口
- ui
- index.js // 客户端 UI 入口
- package.json // 插件依赖等信息
- example // UI 测试目录
在该插件目录中，安装依赖。
# npm install
$ yarn install
开发插件
与正常插件一样，安装依赖后，执行以下命令：
# npm run build && npm run start
$ yarn build && yarn start
此时，就能看到 UmiUI 启动了。
其中 example 项目就是测试项目，点击进入，会看到 UI 插件在左侧菜单。
ui/index.js 负责 UI 插件的展示，你可以使用 Umi UI 客户端 API ，开发插件。
WARNING
Umi UI uses antd 4.x for development and external for antd.
Please refer to antd 4.x documentation when developing plugin UI.
import { Button } from 'antd';
export default (api) => {
const { callRemote } = api;
function PluginPanel() {
return (
<div style={{ padding: 20 }}>
<Button
type="primary"
onClick={async () => {
const { data } = await callRemote({
type: 'org..umi-dev.test',
});
alert(data);
}}
>Test</Button>
</div>
);
}
api.addPanel({
title: 'umi-dev',
path: '/umi-dev',
icon: 'home',
component: PluginPanel,
});
}
Use Umi UI theme
Umi UI provides a set of antd theme variables that third-party component libraries can use to develop plug-ins in non-Umi UI runtime environments.
Usage
Install the umi-ui-theme theme pack, now only the dark dark theme is available.
// .umirc.js
import { dark, light } from 'umi-ui-theme';
{
theme: dark
}
Introduced in the less file, you can use the less variable inside.
// dark
@import "~@umi-ui-theme/dark.less";
// light
@import "~@umi-ui-theme/light.less";
