iceworks(飛冰gui)是款很不錯的圖形化界面的開發(fā)平臺，好用的同時功能也是非常的強大，提供了海量的物料，包含了超多業(yè)務場景，自己也可以定制物料哦，需要的朋友，趕快來下載打造專屬的iceworks界面吧！

阿里iceworks官方簡介

iceworks是一個圖形化界面的開發(fā)平臺，它承載了ice的物料體系和開發(fā)體驗,是一套基于react的中后臺應用解決方案，在阿里巴巴內部，已經有270多個來自幾乎所有bu的項目在使用

iceworks使用教程

iceworks快速開始

零環(huán)境搭建，零配置，簡單易用

iceworks是ice推出的輔助開發(fā)者快速開發(fā)中后臺前端應用的gui軟件，目前支持macos和windows兩大平臺。通過iceworks點擊下載按鈕即可。

創(chuàng)建項目

軟件啟動后，項目列表為空，可通過的【創(chuàng)建項目】新建一個項目。

界面會跳轉到模板市場，目前提供三種模板進行選擇，鼠標移動到指定的模板上，點擊【以該模板創(chuàng)建項目】進入項目配置頁面。

新建一個文件夾或者選擇已有的空文件夾（避免覆蓋原有文件）。

給項目起一個項目名，以便后續(xù)識別。

點擊【開始創(chuàng)建項目】即可開始創(chuàng)建

默認會在創(chuàng)建的時候同時安裝項目依賴，時間上會相對久一些，也可取消勾選，后續(xù)自行安裝

管理項目

項目創(chuàng)建完成后，會自動添加到項目列表中，并打開當前項目管理面板。

通過項目管理面板，可執(zhí)行啟動調試服務新建頁面構建項目等操作。

啟動調試服務

點擊啟動調試服務等待完成后出現服務地址，點擊可以預覽當前項目。

上圖是一個ice design cms模板啟動后的預覽效果。

新建頁面

啟動調試服務后，可使用新建頁面來搭建頁面，通過block的組合完成頁面的創(chuàng)建。

進入block搭建界面

上方列出了當前項目可用的layout布局方式，選中任一一個作為新頁面的布局。

下方列出了當前可選擇的blocks,點擊即可選擇該block到已選區(qū)塊列表中。

右側為選中block組合的縮略圖預覽。

選擇layout以及block后，點擊右下角生成頁面，會提示輸入頁面名，路由名，可以定義需要的名稱，

頁面名：表示生成的文件名稱。

路由名：表示頁面的訪問地址，可通過http://127.0.0.1:4444/#/xxxx訪問到對應的路由頁面。

示例中，創(chuàng)建了page16訪問后即可看到剛搭建的頁面了。

進入開發(fā)調試

點擊項目版面上的編輯中打開會立即使用設置中選擇的編輯器打開項目，目前支持visual studio code，sublime text3，webstorm和atom等編輯器，推薦使用visual studio code，如果你的電腦中未安裝請先安裝。

項目目錄結構說明：

例如上一步已創(chuàng)建的page16頁面：

通過二次開發(fā)增加業(yè)務邏輯，完成業(yè)務需求。

打包發(fā)布

點擊項目面板上的構建項目按鈕，將開發(fā)的構建出最終的jscss等資源。

構建完成后，會在項目目錄下生成build文件夾，里面存在了index.htmlindex.jsindex.css文件。使用你熟悉的方式，上傳到對應的cdn服務器。

部署上線

上線過程即發(fā)布html文件的過程，index.html文件存在在build目錄中，將index.html文件復制到對應的服務服務器，并修改html源碼中的/build/index.css和/build/index.js地址，是上一步中得到的cdn地址以及站點標題。

一個標準的html文件如下所示：

在線上環(huán)境我們強烈推薦使用production版本的react，而不是development版本。它們之間的區(qū)別除了體積之外，還包括一些針對線上環(huán)境的性能優(yōu)化。

到這里你已經學會使用iceworks創(chuàng)建一個項目并發(fā)布

更新日志

特性：增加區(qū)塊組合推薦

優(yōu)化：自定義物料源優(yōu)化

修復：bugfix 若干