UD5工具箱
使用教程
本教程将详细介绍如何使用 组件预览沙盒 来编写和预览 React 与 Vue3 组件。无论您是前端开发的初学者还是有经验的开发者，都可以通过本教程快速掌握工具的使用方法。
第一步：选择框架模式
打开工具页面后，您会在顶部看到两个框架切换按钮：React 和 Vue3。点击对应的按钮即可切换到相应的框架模式。每种模式都预加载了该框架的预设示例代码，您可以直接看到组件的预览效果。如果您正在学习特定的框架，建议选择对应的模式；如果您想对比两种框架的差异，可以分别在两种模式下体验相同的组件功能。
第二步：体验预设示例
工具默认加载了一个预设示例，您可以在代码编辑器中查看组件的源代码，在预览面板中查看组件的渲染效果。点击示例切换按钮可以加载不同的预设示例。建议您依次体验所有6个预设示例，了解 React 和 Vue3 在组件编写方式上的差异。在每个示例中，您可以直接与预览区域中的组件进行交互（如点击按钮、输入文本等），观察组件的状态变化和响应行为。
第三步：编辑组件代码
在代码编辑器中，您可以直接修改组件的代码来实验不同的功能和效果。编辑器支持语法高亮，可以帮助您区分关键字、字符串和注释等不同的代码元素。修改代码后，工具会自动检测变更并触发 Babel 编译。如果编译成功，预览面板会立即更新为修改后的组件效果；如果编译失败（如语法错误），编辑器下方会显示错误提示信息，帮助您快速定位和修复问题。在编辑过程中，您可以通过「复制代码」按钮随时保存当前的代码内容。
第四步：查看控制台输出
如果您在组件代码中添加了 console.log 等控制台方法调用，输出信息会显示在页面底部的控制台面板中。控制台面板能够捕获组件渲染过程中的所有控制台输出，包括普通的日志信息、警告信息和错误信息。您可以通过控制台输出来验证组件的状态变化、事件处理逻辑和数据流是否符合预期。控制台面板还支持一键清空功能，方便您在进行新一轮测试时清除之前的输出记录。
第五步：使用全屏预览
当您想要更清楚地查看组件的渲染效果时，可以点击工具栏上的「全屏预览」按钮，将预览区域扩展为浏览器全屏模式。在全屏模式下，编辑器和控制台面板会自动隐藏，预览区域占据整个屏幕，提供最大的可视区域来展示组件。全屏模式特别适合以下场景：在团队会议上演示组件设计、截图保存组件的视觉效果、以及检查组件在不同屏幕尺寸下的响应式表现。按 Esc 键或点击退出按钮即可返回正常的分屏视图。
第六步：重置与切换示例
如果您在编辑过程中希望恢复到示例的初始状态，可以点击「重置代码」按钮。该操作会将编辑器内容恢复为当前预设示例的原始代码，清除所有手动修改。如果您想尝试新的示例，可以直接点击示例切换按钮加载其他预设示例。注意，切换示例会替换编辑器中的当前内容，如果您的代码尚未保存，建议先使用「复制代码」按钮将代码复制到剪贴板。
通过以上步骤，您可以充分利用 组件预览沙盒 的各项功能来编写、编译和预览 React 与 Vue3 组件。本工具的设计目标是让组件开发变得简单、快捷和有趣，无论您处于哪个学习阶段，都能在这里获得良好的开发体验。