vue2 项目集成blockly
1.npm 新建一个vue 项目（过程略...）
2.从github 上下载blockly 代码（可能需要搭梯子），个人建议从gitee 上下载
1614914109(1).png
blockly 文件夹中有很大部分的文件再自己的项目中都是不需要的，例如demo文件和语言文件等。所以我就不直接吧整个包都放到vue 项目里头了（为了减少体积），只去需要用到的。
目前起步阶段只需要下面的5个文件：
<!-- 基础依赖文件 -->
<script src="static/blockly/code/blockly_compressed.js"></script>
<script src="static/blockly/code/blocks_compressed.js"></script>
<script src="static/blockly/code/javascript_compressed.js"></script>
<!-- 中文语言包 -->
<script src="static/blockly/code/zh-hans.js"></script>
<!-- 创建自定义的块时候需要用到的依赖 -->
<script src="static/blockly/code/closure/goog/base.js"></script>
<!-- 自定义块 -->
<script src="static/blockly/code/blocks/b1.js"></script>
<script src="static/blockly/code/generators/b1.js"></script>
3.封装成一个基础的vue组件
<template>
<div class="blockly">
<!-- 工作区 -->
<div id="blocklyDiv"></div>
<!-- 工具栏 -->
<xml id="toolbox" style="display: none">
<category name="Logic" colour="%{BKY_LOGIC_HUE}">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_negate"></block>
<block type="logic_boolean"></block>
</category>
<category name="Loops" colour="%{BKY_LOOPS_HUE}">
<block type="controls_repeat_ext">
<value name="TIMES">
<block type="math_number">
<field name="NUM">10</field>
</block>
</value>
</block>
<block type="controls_whileUntil"></block>
</category>
<category name="Math" colour="%{BKY_MATH_HUE}">
<block type="math_number">
<field name="NUM">123</field>
</block>
<block type="math_arithmetic"></block>
<block type="math_single"></block>
</category>
<category name="Text" colour="%{BKY_TEXTS_HUE}">
<block type="text"></block>
<block type="text_length"></block>
<block type="text_print"></block>
</category>
<category name="测试" colour="%{BKY_TEXTS_HUE}">
<block type="b1"></block>
</category>
</xml>
</div>
</template>
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);
},
