Micro UI渲染器演示
使用Vite构建和服务React Micro UI的可扩展架构。每个组件都会自动构建到自己的独立HTML文件中。
🚀 快速入门
# Install dependencies
pnpm install
# Start dev server
pnpm dev打开 http://localhost:5173 查看可用微UI的索引。
📝 如何添加Micro UI
- 创建文件 在
src/micro-uis/（例如。，MyFeature.tsx). - 导出您的组件 （命名或默认）。
- 完成！ 访问它在
/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安装样板。