这一章我们开始尝试在本地将scratch-gui项目的最新代码运行起来，并对其项目结构有个初步的认识。 **本地搭建运行** 我们从官方的gitlab仓库拉取最新的代码: > git clone [https://github.com/LLK/scratch-gui.git](https://github.com/LLK/scratch-gui.git) 建议使用二次开发的版本 ~~~ https://github.com/open-scratch/scratch3 ~~~ 目前主分支是develop，并且在不断的更新中，注意查看一下自己克隆的分支是否正确。 进入工程，安装依赖： > `cd scratch-gui` > > `npm install` 如果还没有安装npm，请参考[https://www.npmjs.com/](https://www.npmjs.com/) 配置npm使用国内镜像加速 ~~~ npm config set registry https://registry.npm.taobao.org ~~~ 这个过程中可能会碰到错误信息而安装失败，这时我们需要根据具体的错误信息自己去网上寻找解决方案。 安装完成后，启动服务： > npm start  看到如下信息后：  打开浏览器，访问[http://localhost:8601](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.