scratch-gui 如何集成进 vue

Scratch-GUI是一个基于JavaScript的可视化编程工具，主要用于教育和儿童编程学习。将它集成到Vue.js项目中，你需要遵循一些步骤：

1. **安装Scratch-GUI**: 首先，需要从官方GitHub仓库下载Scratch-GUI的库文件或将其作为npm依赖安装。在终端或命令行里运行：

   npm install scratch-blocks scratch-gui --save

2. **引入模块**: 在你的Vue组件中，通过`import`语句导入Scratch-GUI模块：

   import * as sg from 'scratch-gui';

3. **创建实例**: 创建一个Scratch-Gui的实例，并可以配置其显示区域：

   const gui = new sg.ScratchGui({
     el: '#your-scratch-container', // 指定SVG元素或div容器ID
     width: '100%', height: '100%'
   });

4. **响应事件**: 如果需要，可以在Vue的生命周期钩子（如`mounted()`）内绑定事件监听和处理用户交互：

   mounted() {
     this.$refs.scratchContainer.addEventListener('blocklyWorkspaceLoaded', () => {
       console.log('Scratch workspace loaded');
     });
   },
   methods: {
     onCodeRun(event) {
       gui.workspace.runBlocklyCommand(event);
     }
   }

5. **销毁实例**: 在Vue组件卸载时，记得清除或销毁Scratch-GUI实例以释放资源：

   beforeDestroy() {
     if (gui && gui.isLoaded()) {
       gui.setVisible(false); // 可选操作，关闭界面
       gui.destroy();
     }
   }