【Blockly开发教程】04 vue3 blockly项目

你将收获

通过阅读本文，你将了解：

• 如何在Vue3项目中引入Blockly模块、初始化、自定义积木块、自定义转代码。

1 如何将blockly集成到项目代码中

为了方便大家快速拉取，我同步了一份到 gitee：https://gitee.com/BrightLin/blockly-samples，推荐下载这个，会定期同步最新代码。或者科学上网，下载官方库。

如图，有很多类型的示例：

这次通过blockly-vue3来讲解集成blockly的几个重要步骤。

1.1 准备

上一篇文章，已经克隆过代码了，如果你直接看到这篇文章，可以跳转先阅读上一篇文章的准备部分：【Blockly开发教程】03 react blockly项目

vue3示例略微和react示例有一些差异。

1.2 vue3项目

1.2.1 运行

• 初始化
  打开vscode，加载blockly-samples目录，并打开vscode内的终端，在blockly-samples根目录，或者blockly-vue3目录下运行：

  cd examples/  # 或者 cd examples/blockly-vue3
  yarn
  

• 运行vue3项目
  cd到vue3示例目录，然后运行start命令：

  cd blockly-vue3
  yarn start
  

  运行成功后，打开http://localhost:3000/，如下图所示：
  

1.2.2 分析

项目中集成Blockly有以下几个重要步骤：

• a.添加Blockly为依赖
  在package.json的dependencies中，添加blockly依赖。

  {
       
    "name": "blockly-vue3",
    "version": "0.0.0",
    "scripts": {
       
      "start": "vite",
      "build": "vite build",
      "preview": "vite preview --port 4173",
      "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
    },
    "dependencies": {
       
      "blockly": "^10.0.0",
      "vue": "^3.2.37"
    },
  

  或者通过命令方式，在项目中添加依赖，可以安装最新版本，或指定版本：

  yarn add blockly
  # 或 yarn add blockly@10.0.0
  

• b.创建Blockly UI组件，并导入Blockly模块
  文件：blockly-samples/examples/blockly-vue3/src/components/BlocklyComponent.vue

  <script setup>
  import {
       onMounted, ref, shallowRef} from 'vue';
  import Blockly from 'blockly'; // 导入Blockly模块
  
  const props = defineProps(['options'])