下载blockly
关于什么是blockly请参见google可视化编程工具blockly入门。
首先需要获取blockly代码，官方文档中获取blockly代码有npm、github、Unpkg等多种方式。本文使用github，访问blockly github仓库链接https://github.com/google/blockly并下载，下载后的blockly代码目录结构如下：
注：上手阶段只需关注图中红色标注的三个文件和目录，其中msg目录暂时只用到msg/js目录中的语言包，本文采用msg/js/zh-hans.js，表示为代码块使用的语言为中文。
项目目录结构
新建目录名为blockly-demo的文件夹，增加index.html，将已经下载的blockly代码也复制到该目录下，如下图：
导入基础模块
使用自己喜欢的编辑器，添加如下代码，使用blockly需要引入blockly_compressed.js、blocks_compressed.js、msg/js/zh-hans.js三个基础模块，其中blockly_compressed.js为核心脚本，blocks_compressed.js为核心图形代码块集，zh-hans.js为语言模块，本例使用中文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>blockly demo</title>
</head>
<body>
<!-- 导入blockly基础模块 -->
<script src="./blockly/blockly_compressed.js"></script>
<script src="./blockly/blocks_compressed.js"></script>
<script src="./blockly/msg/js/zh-hans.js"></script>
</body>
</html>
创建工作区
现在，通过浏览器打开index.html文件会显示一片空白，什么都不会发生，要使用blockly需要首先创建工作区，工作区是blockly的核心，下图就是一个典型的工作区的样子，由工具箱和图形代码编辑区两部分组成。
要创建工作区首先需要创建一个空白的div元素来承载，另外通过嵌入xml来表示工具箱，由于xml不能在浏览器中正常渲染，因此需要设置为不可见，编辑index.html增加如下代码
<!-- 空白div元素，用来承载工作区 -->
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<!-- 工具箱 block表示为一种代码块 这里有7个代码块-->
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
接下来就是调用blockly提供的api来生成工作区了，编辑index.html在页面的最后增加js脚本，Blockly.inject方法用来注入工作区到id为blocklyDiv的DOM元素中，也就是传入的第一个参数，第二个参数为键值对的字典形式的配置参数，这里传入的参数为id为toolbox表示的工具箱的信息。
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
index.html的完整代码参考
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>blockly demo</title>
</head>
<body>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_repeat_ext"></block>
<block type="logic_compare"></block>
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="text"></block>
<block type="text_print"></block>
</xml>
<script src="./blockly/blockly_compressed.js"></script>
<script src="./blockly/blocks_compressed.js"></script>
<script src="./blockly/msg/js/zh-hans.js"></script>
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
</body>
</html>
此时浏览器再次打开或者刷新已打开的index.html，页面显示如下图，试试拖放工具箱中的代码块到编辑区，此时我们就完成了一个固定大小的工作区的创建。
