第三方库:
https://github.com/google/blockly
需要引入两个js文件
blockly_compressed.js
blocks_compressed.js
使下边的代码正常运行
<template>
<div id="lesson1">
<h1>挑战1</h1>
<hr>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number">
<field name="NUM">123</field>
</block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
</div>
</template>
<script>
Vue.use(Blocks)
var workspace = Blockly.inject('blocklyDiv', {
toolbox: document.getElementById('toolbox')
});
</script>
@oyljerry
这样还是不行
<template>
<div id="lesson1">
<h1>挑战1</h1>
<hr>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="controls_repeat_ext"></block>
<block type="math_number">
<field name="NUM">123</field>
</block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
</div>
</template>
<script>
import Blockly from '../../public/blockly_compressed.js'
Vue.use(Blockly)
import Blocks from '../../public/blocks_compressed.js'
Vue.use(Blocks)
var workspace = Blockly.inject('blocklyDiv', {
toolbox: document.getElementById('toolbox')
});
</script>