分为三部分，编辑器(editor)、视图组件(widget)以及组件配置(schema)

其中editor与widget采用模块联邦进行分离，而schema则依赖json动态渲染

因此在大部场景下editor可以独立部署，只需要针对不同的需求开发不同的widget以及schema

弃用@originjs/vite-plugin-federation

是否需要换回webpack

需要接入编辑器的项目

pnpm i @mpd/core @micro-zoe/micro-app 

main.js

import microApp from '@micro-zoe/micro-app' microApp.start()

接入文件

<template> <div id="mpd-container"></div> </template

import { useDesign } from '@mpd/core' const [getData, setData] = await useDesign('#mpd-container', { url: '//localhost:9999/miniprogram/editor' })

进行视图组件开发的

pnpm create @mpd/template example cd example pnpm i pnpm editor:init 

具体可以参考@mpd/template中的demo

Package	Version (click for changelogs)
core
editor
template

默认是在微前端(micro-app)环境下执行的。

可以独立部署，需要保证同域或允许跨域。

具体说明

支持独立运行，依赖Module Federation，如果不使用模板，需要自行配置相关入口。

渲染环境已经安装了element-plus，因此可以在视图中直接使用相关组件。但是独立运行时需要自行安装（不推荐)

理论上进行视图组件开发时，只需要关注widgets中的内容，由于依赖了动态组件，视图的命名规则需要遵循${name}.view.vue

如果有特殊需求，可以在components/viewRender中自行修改

interface IWidget { _uuid: string // 随机字符串，唯一识别id _name: string // 视力组件的显示名称 _view: string // 渲染视图的名称 _schema: string // 相关配置项集合的名称 _disabled: boolean _inContainer: 'outer' | 'inner' | string // 该组件允许出现的位置 [attr: string]: any }

带下划线的都是设计侧在渲染视图和应用配置参数的时候会用到的参数，小程序侧不推荐使用。

_inContainer的作用是限制组件的拖拽位置

比如容器不允许嵌套，那么只能出现在外部，就需要设置outer。

通过json配置组件相关的设置内容

interface ISchema { type: SchemaType // 配置项的类型 label: string // 配置项的名称 key: string // 视图中双向绑定的值，支持链式（style.marginTop） [attr: string]: any }

pnpm i pnpm dev:editor pnpm dev:docs