微UI渲染器

Micro UI渲染器演示

使用Vite构建和服务React Micro UI的可扩展架构。每个组件都会自动构建到自己的独立HTML文件中。

🚀 快速入门

# Install dependencies
pnpm install

# Start dev server
pnpm dev

打开 http://localhost:5173 查看可用微UI的索引。

📝 如何添加Micro UI

1. 创建文件 在 src/micro-uis/ （例如。， MyFeature.tsx).
2. 导出您的组件 （命名或默认）。
3. 完成！ 访问它在 /MyFeature.html.

🛠 运作原理

该项目使用自定义Vite插件来自动化多页面应用程序通常需要的样板：

• 自动发现：插件扫描 src/micro-uis/ 为了 .tsx 文件夹。
• 虚拟条目：它使用以下命令自动为每个组件生成一个HTML文件和一个React入口点 micro-ui-template.html 和 micro-ui-entry-template.tsx.
• 生产建设：跑步 pnpm build 为中的每个组件输出单独的HTML文件 dist/，非常适合嵌入IFrames或独立分发。

📂 项目结构

• src/micro-uis/：独立组件的目录。
• src/main.tsx：列出所有开发中组件的索引页。
• vite.config.ts：包含自定义插件逻辑。
• micro-ui-template.html：HTML shell模板。
• micro-ui-entry-template.tsx：React安装样板。