vue2 項(xiàng)目集成blockly
1.npm 新建一個(gè)vue 項(xiàng)目（過程略...）
2.從github 上下載blockly 代碼（可能需要搭梯子），個(gè)人建議從gitee 上下載
1614914109(1).png
blockly 文件夾中有很大部分的文件再自己的項(xiàng)目中都是不需要的，例如demo文件和語言文件等。所以我就不直接吧整個(gè)包都放到vue 項(xiàng)目里頭了（為了減少體積），只去需要用到的。
目前起步階段只需要下面的5個(gè)文件：
<!-- 基礎(chǔ)依賴文件 -->
<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>
<!-- 創(chuàng)建自定義的塊時(shí)候需要用到的依賴 -->
<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.封裝成一個(gè)基礎(chǔ)的vue組件
<template>
<div class="blockly">
<!-- 工作區(qū) -->
<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 部分為工具箱的配置組成，后續(xù)有需要可以改成json 配置的方式。
1614924063(1).png
4.設(shè)置工作區(qū)寬高自適應(yīng)。這里并沒有照抄官方文檔上的代碼，而是按照自己的想法做了下修改（可能是我的水平還不夠高，完全沒看懂官方教程上的一長串代碼的意義）
mounted() {
var blocklyDiv = document.getElementById('blocklyDiv');
this.demoWorkspace = Blockly.inject(blocklyDiv, // 初始化工作區(qū)
{media: 'static/blockly/code/media/', //指認(rèn)媒體文件夾，主要存放一些需要用到的圖標(biāo)和聲音文件
toolbox: document.getElementById('toolbox')}); // 綁定工具箱的xml 配置
var onresize = function(e) { // 寬高自適應(yīng)
Blockly.svgResize(this.demoWorkspace);
};
window.addEventListener('resize', onresize, false);
Blockly.svgResize(this.demoWorkspace);
},
