blockly + vue2 学习笔记1

vue2 项目集成blockly

1.npm 新建一个vue 项目（过程略...）
2.从github 上下载blockly 代码（可能需要搭梯子），个人建议从gitee 上下载

1614914109(1).png

blockly 文件夹中有很大部分的文件再自己的项目中都是不需要的，例如demo文件和语言文件等。所以我就不直接吧整个包都放到vue 项目里头了（为了减少体积），只去需要用到的。
目前起步阶段只需要下面的5个文件：

3.封装成一个基础的vue组件

xml 部分为工具箱的配置组成，后续有需要可以改成json 配置的方式。

1614924063(1).png

4.设置工作区宽高自适应。这里并没有照抄官方文档上的代码，而是按照自己的想法做了下修改（可能是我的水平还不够高，完全没看懂官方教程上的一长串代码的意义）

  mounted() {
    var blocklyDiv = document.getElementById('blocklyDiv');
    this.demoWorkspace = Blockly.inject(blocklyDiv,      // 初始化工作区
        {media: 'static/blockly/code/media/',            //指认媒体文件夹，主要存放一些需要用到的图标和声音文件
         toolbox: document.getElementById('toolbox')});   // 绑定工具箱的xml 配置

    var onresize = function(e) {     // 宽高自适应
      Blockly.svgResize(this.demoWorkspace);
    };
    window.addEventListener('resize', onresize, false);
    Blockly.svgResize(this.demoWorkspace);
  },