這一章我們開始嘗試在本地將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.