的(dí)卢，又作的颅，历史名马，奔跑的速度飞快，背负刘备跳过阔数丈的檀溪，摆脱追兵；
以组件化的方式接入 qiankun(乾坤)微前端框架，支持目前主流的两大技术栈 React 和 Vue，SDK 分别提供了 React、Vue2、Vue3 版本的 SDK；
qiankun(乾坤)在 single-spa 的基础上增加了 JS 沙盒环境，提供了 Html Entry 等能力，降低了接入微前端的接入成本；但是我们中后台业务在接入过程中发现，基于 React、Vue 技术栈，按照 qiankun API 的接入，大家的使用姿势各种各样，没有统一的标准，所以我们采用组件化的方式，基于 qiankun 微前端提供的 API 二次封装，提供路由级子应用和组件级子应用的组件，方便大家使用和接入 qiankun，所以 SDK 分别提供了 React、Vue2、Vue3 版本的 SDK；
以 React 为例，仅需要一个组件即可完成接入
import {createRoot} from 'react/client';
import { DLRouter } from '@ks-dilu/react';
const micros = [{
activeRule: '/zone';
entry: 'https://xxx.cdn.com/xx',
name: 'test1',
},{
activeRule: '/zone';
entry: 'https://xxx.cdn.com/xx',
name: 'test1'
}]
const App = () => {
return (
<DLRouter
fetchMicros={async () => {
return micros;
}}
></DLRouter>
);
};
const container = createRoot(document.getElementById('main_root_id'));
container.render(<App/>)SDK 提供 React 版本和 Vue 版本，详细说明可以参考各独立 SDK 说明
-
主应用 SDK
- @ks-dilu/react
- @ks-dilu/vue, 支持 Vue2 和 Vue3
-
子应用 SDK
- @ks-dilu/react-micro
- @ks-dilu/vue-micro, 支持 Vue2 和 Vue3
在 example中，有多个示例应用程序和多个已挂载的 Micro FE 应用程序。要使其运行，请首先克隆 dilu-sdk
$ git clone git@github.com:Kwai-Eshop/dilu-example.git
$ cd dilu-example安装依赖和运行
$ yarn
# 启动react版本的主应用和所有子应用（react版本、vue2版本、vue3版本）
$ npm run example:react
# 启动vue2版本的主应用和所有子应用（react版本、vue2版本、vue3版本）
$ npm run example:vue2
# 启动vue3版本的主应用和所有子应用（react版本、vue2版本、vue3版本）
$ npm run example:vue3dilu-sdk is MIT licensed.
明礼 💻 |
louiswu 💻 |
frankylvu 💻 |
zhongkang 💻 |
arcluziyang 💻 |