scratch3.0系列分享章节列表
scratch3.0二次开发scratch3.0基本介绍(第一章)
scratch3.0二次开发运行scratch-gui项目并了解工程结构(第二章)
scratch3.0 scratch-gui中集成自定义用户系统1(第四章)
scratch3.0 scratch-gui中集成自定义用户系统2(第五章)
scratch3.0 scratch-gui中集成自定义用户系统3(第六章)
scratch3.0 scratch-gui中集成自定义用户系统4(第七章)
scratch3.0 scratch-gui中集成自定义用户系统5(第八章)
scratch3.0 scratch-gui中集成自定义用户系统6(第九章)
scratch3.0 scratch-gui中集成作品系统1(第九章)
scratch3.0 scratch-gui中集成作品系统2(第十章)
scratch3.0 scratch-gui中集成作品系统3(第十一章)
scratch3.0 scratch-gui加载自定义初始化角色(第十二章)
scratch3.0 scratch-gui打开自己平台云端作品(第十三章)
这一章我们开始尝试在本地将scratch-gui项目的最新代码运行起来，并对其项目结构有个初步的认识。
本地搭建运行
我们从官方的gitlab仓库拉取最新的代码:
git clone https://github.com/LLK/scratch-gui.git
目前主分支是develop，并且在不断的更新中，注意查看一下自己克隆的分支是否正确。
进入工程，安装依赖：
cd scratch-gui
npm install
如果还没有安装npm，请参考https://www.npmjs.com/
这个过程中可能会碰到错误信息而安装失败，这时我们需要根据具体的错误信息自己去网上寻找解决方案。
安装完成后，启动服务：
npm start
看到如下信息后：
打开浏览器，访问http://localhost:8601就会看到scratch 3.0的playground为render-gui完整模式的界面，像官网的一样:
由于scratch-gui也处于开发之中，我们看到的有些功能还没有实现，或者没有开源出来。但是对于编程模块的功能，我们可以自己尝试一下，基本上都是跟官方的一样的。如果我们不打算在编程功能模块做进一步扩展的话，这一块的功能我们可以直接拿来使用，而不需要再进行二次开发了。
工程目录结构
我们先一起来过一遍scratch-gui工程的基本目录结构，以便开始我们的二次开发之旅。
我们在WebStorm中打开项目，看到如下目录结构：
熟悉react-redux框架的朋友应该很快就清楚工程各个目录的作用， src目录是我们真正需要了解和二次开发重点要修改的目录，主要包括：
components: 组件目录，主要定义UI组件的结构和样式，负责数据的展示
containers:主要负责对components中部分组件的封装，处理组件的业务逻辑，将组件的数据与redux打通，不涉及样式
css: 全局样式设置文件
examples/extensions: 关于scratch扩展的配置示例
lib: 工具方法目录，供组件调用的一些模块和方法，其中以-hoc.jsx结尾的高阶组件，是为UI组件提供额外的功能方法
playground: 多种模式的使用示例：积木模式(blocks-only)、舞台模式(player)、完整模式(render-gui)
reducers: redux的store的初始状态、actions和 reducers的定义
index.js: 作为 library 打包的入口文件
好了，本章我们成功拉取scratch-gui的代码，并在本地成功运行起来，然后简单地分析了它的代码目录结构，下一节课我们将尝试在平台中自定义我们的品牌logo.
上一章节链接：https://blog.csdn.net/tank_ft/article/details/104038256
下一章节链接：https://blog.csdn.net/tank_ft/article/details/104039006有不懂的欢迎访问我的博客获取我的联系方式，手把手教哈，博客地址：http://www.liyblog.top/p/1.html
