Iceworks是由飛冰ICE推出一款開源的編程開發(fā)GUI軟件，主要用于輔助開發(fā)者快速開發(fā)中后臺(tái)前端應(yīng)用，目前支持macOS和Windows兩大平臺(tái)。飛冰ice是一套基于React的中后臺(tái)應(yīng)用解決方案，它包含了一條從設(shè)計(jì)端到開發(fā)端的完整鏈路，幫助我們的用戶快速搭建屬于自己的中后臺(tái)應(yīng)用。
可視化工具區(qū)塊拼裝
淘寶React最佳實(shí)踐
零環(huán)境搭建 零配置 簡(jiǎn)單易用
創(chuàng)建項(xiàng)目
軟件啟動(dòng)后，項(xiàng)目列表為空，可通過的【創(chuàng)建項(xiàng)目】新建一個(gè)項(xiàng)目。
界面會(huì)跳轉(zhuǎn)到模板市場(chǎng)，目前提供三種模板進(jìn)行選擇，鼠標(biāo)移動(dòng)到指定的模板上，點(diǎn)擊【以該模板創(chuàng)建項(xiàng)目】進(jìn)入項(xiàng)目配置頁(yè)面。
新建一個(gè)文件夾或者選擇已有的空文件夾（避免覆蓋原有文件）。
給項(xiàng)目起一個(gè)項(xiàng)目名，以便后續(xù)識(shí)別。
點(diǎn)擊【開始創(chuàng)建項(xiàng)目】即可開始創(chuàng)建
默認(rèn)會(huì)在創(chuàng)建的時(shí)候同時(shí)安裝項(xiàng)目依賴，時(shí)間上會(huì)相對(duì)久一些，也可取消勾選，后續(xù)自行安裝
管理項(xiàng)目
項(xiàng)目創(chuàng)建完成后，會(huì)自動(dòng)添加到項(xiàng)目列表中，并打開當(dāng)前項(xiàng)目管理面板。
通過項(xiàng)目管理面板，可執(zhí)行啟動(dòng)調(diào)試服務(wù)新建頁(yè)面構(gòu)建項(xiàng)目等操作。
啟動(dòng)調(diào)試服務(wù)
點(diǎn)擊啟動(dòng)調(diào)試服務(wù)等待完成后出現(xiàn)服務(wù)地址，點(diǎn)擊可以預(yù)覽當(dāng)前項(xiàng)目。
上圖是一個(gè)ICEDesignCMS模板啟動(dòng)后的預(yù)覽效果。
新建頁(yè)面
啟動(dòng)調(diào)試服務(wù)后，可使用新建頁(yè)面來搭建頁(yè)面，通過block的組合完成頁(yè)面的創(chuàng)建。
進(jìn)入block搭建界面
上方列出了當(dāng)前項(xiàng)目可用的layout布局方式，選中任一一個(gè)作為新頁(yè)面的布局。
下方列出了當(dāng)前可選擇的blocks,點(diǎn)擊即可選擇該block到已選區(qū)塊列表中。
右側(cè)為選中block組合的縮略圖預(yù)覽。
選擇layout以及block后，點(diǎn)擊右下角生成頁(yè)面，會(huì)提示輸入頁(yè)面名，路由名，可以定義需要的名稱，
頁(yè)面名：表示生成的文件名稱。
路由名：表示頁(yè)面的訪問地址，可通過http://127.0.0.1:4444/#/xxxx訪問到對(duì)應(yīng)的路由頁(yè)面。
示例中，創(chuàng)建了page16訪問后即可看到剛搭建的頁(yè)面了。
進(jìn)入開發(fā)調(diào)試
點(diǎn)擊項(xiàng)目版面上的編輯中打開會(huì)立即使用設(shè)置中選擇的編輯器打開項(xiàng)目，目前支持VisualStudioCode，SublimeText3，WebStorm和Atom等編輯器，推薦使用VisualStudioCode，如果你的電腦中未安裝請(qǐng)先安裝。
項(xiàng)目目錄結(jié)構(gòu)說明：
例如上一步已創(chuàng)建的Page16頁(yè)面：
通過二次開發(fā)增加業(yè)務(wù)邏輯，完成業(yè)務(wù)需求。
打包發(fā)布
點(diǎn)擊項(xiàng)目面板上的構(gòu)建項(xiàng)目按鈕，將開發(fā)的構(gòu)建出最終的jscss等資源。
構(gòu)建完成后，會(huì)在項(xiàng)目目錄下生成build文件夾，里面存在了index.htmlindex.jsindex.css文件。使用你熟悉的方式，上傳到對(duì)應(yīng)的cdn服務(wù)器。
部署上線
上線過程即發(fā)布HTML文件的過程，index.html文件存在在build目錄中，將index.html文件復(fù)制到對(duì)應(yīng)的服務(wù)服務(wù)器，并修改html源碼中的/build/index.css和/build/index.js地址，是上一步中得到的cdn地址以及站點(diǎn)標(biāo)題。
一個(gè)標(biāo)準(zhǔn)的HTML文件如下所示：
在線上環(huán)境我們強(qiáng)烈推薦使用production版本的React，而不是development版本。它們之間的區(qū)別除了體積之外，還包括一些針對(duì)線上環(huán)境的性能優(yōu)化。
到這里你已經(jīng)學(xué)會(huì)使用Iceworks創(chuàng)建一個(gè)項(xiàng)目并發(fā)布：）
由于項(xiàng)目在安裝依賴后，產(chǎn)生文件夾 node_modules 含有較多的碎小文件，編輯器在索引文件引起的卡頓。 WebStorm 中尤為明顯，可通過 exclude node_modules 目錄，不需要檢索該文件夾下的內(nèi)容。
2、如何設(shè)置網(wǎng)頁(yè)在瀏覽器 Tab 上面的 Icon (favicon)
細(xì)心的同學(xué)可能會(huì)看到頁(yè)面在瀏覽器 Tab 上面會(huì)有自定義的 Icon：
如果你想要在自己站點(diǎn)上面加上這個(gè) Icon 可以按照如下步驟添加：
準(zhǔn)備一個(gè) Icon，文件格式可以為 .png 或者 .ico，正方形，分辨率可以是 32x32px 或者 64x64px 文件體積要求盡可能小。
上傳 CDN 拿到一個(gè) url 或者在自己服務(wù)器配置靜態(tài)資源服務(wù)
在 HTML 頁(yè)面 標(biāo)簽里面添加如下代碼：
3、在 Iceworks 下載頁(yè)面點(diǎn)擊下載沒反應(yīng)怎么辦？
請(qǐng)檢查是否安裝 Adguard、AdBlock、xxx 安全助手等工具并被其攔截？因?yàn)?Iceworks 是二進(jìn)制可安裝程序，可能會(huì)被安全軟件攔截，如有攔截請(qǐng)點(diǎn)擊確認(rèn)或者臨時(shí)關(guān)閉相關(guān)攔截功能。
4、出現(xiàn)端口已占用啟動(dòng)失敗應(yīng)該如何處理？
當(dāng)你出現(xiàn)類似 Something is already running on port 4444. 或類似的報(bào)錯(cuò)時(shí)，可能是由于 Hosts 配置缺少 localhost 等相關(guān)配置。
[修復(fù)] 創(chuàng)建 ICE Design Lite 異常的問題
【功能特性】
海量高質(zhì)預(yù)制區(qū)塊可視化工具區(qū)塊拼裝
淘寶React最佳實(shí)踐
【使用方法】
Iceworks快速開始零環(huán)境搭建 零配置 簡(jiǎn)單易用
創(chuàng)建項(xiàng)目
軟件啟動(dòng)后，項(xiàng)目列表為空，可通過的【創(chuàng)建項(xiàng)目】新建一個(gè)項(xiàng)目。
界面會(huì)跳轉(zhuǎn)到模板市場(chǎng)，目前提供三種模板進(jìn)行選擇，鼠標(biāo)移動(dòng)到指定的模板上，點(diǎn)擊【以該模板創(chuàng)建項(xiàng)目】進(jìn)入項(xiàng)目配置頁(yè)面。
新建一個(gè)文件夾或者選擇已有的空文件夾（避免覆蓋原有文件）。
給項(xiàng)目起一個(gè)項(xiàng)目名，以便后續(xù)識(shí)別。
點(diǎn)擊【開始創(chuàng)建項(xiàng)目】即可開始創(chuàng)建
默認(rèn)會(huì)在創(chuàng)建的時(shí)候同時(shí)安裝項(xiàng)目依賴，時(shí)間上會(huì)相對(duì)久一些，也可取消勾選，后續(xù)自行安裝
管理項(xiàng)目
項(xiàng)目創(chuàng)建完成后，會(huì)自動(dòng)添加到項(xiàng)目列表中，并打開當(dāng)前項(xiàng)目管理面板。
通過項(xiàng)目管理面板，可執(zhí)行啟動(dòng)調(diào)試服務(wù)新建頁(yè)面構(gòu)建項(xiàng)目等操作。
啟動(dòng)調(diào)試服務(wù)
點(diǎn)擊啟動(dòng)調(diào)試服務(wù)等待完成后出現(xiàn)服務(wù)地址，點(diǎn)擊可以預(yù)覽當(dāng)前項(xiàng)目。
上圖是一個(gè)ICEDesignCMS模板啟動(dòng)后的預(yù)覽效果。
新建頁(yè)面
啟動(dòng)調(diào)試服務(wù)后，可使用新建頁(yè)面來搭建頁(yè)面，通過block的組合完成頁(yè)面的創(chuàng)建。
進(jìn)入block搭建界面
上方列出了當(dāng)前項(xiàng)目可用的layout布局方式，選中任一一個(gè)作為新頁(yè)面的布局。
下方列出了當(dāng)前可選擇的blocks,點(diǎn)擊即可選擇該block到已選區(qū)塊列表中。
右側(cè)為選中block組合的縮略圖預(yù)覽。
選擇layout以及block后，點(diǎn)擊右下角生成頁(yè)面，會(huì)提示輸入頁(yè)面名，路由名，可以定義需要的名稱，
頁(yè)面名：表示生成的文件名稱。
路由名：表示頁(yè)面的訪問地址，可通過http://127.0.0.1:4444/#/xxxx訪問到對(duì)應(yīng)的路由頁(yè)面。
示例中，創(chuàng)建了page16訪問后即可看到剛搭建的頁(yè)面了。
進(jìn)入開發(fā)調(diào)試
點(diǎn)擊項(xiàng)目版面上的編輯中打開會(huì)立即使用設(shè)置中選擇的編輯器打開項(xiàng)目，目前支持VisualStudioCode，SublimeText3，WebStorm和Atom等編輯器，推薦使用VisualStudioCode，如果你的電腦中未安裝請(qǐng)先安裝。
項(xiàng)目目錄結(jié)構(gòu)說明：
例如上一步已創(chuàng)建的Page16頁(yè)面：
通過二次開發(fā)增加業(yè)務(wù)邏輯，完成業(yè)務(wù)需求。
打包發(fā)布
點(diǎn)擊項(xiàng)目面板上的構(gòu)建項(xiàng)目按鈕，將開發(fā)的構(gòu)建出最終的jscss等資源。
構(gòu)建完成后，會(huì)在項(xiàng)目目錄下生成build文件夾，里面存在了index.htmlindex.jsindex.css文件。使用你熟悉的方式，上傳到對(duì)應(yīng)的cdn服務(wù)器。
部署上線
上線過程即發(fā)布HTML文件的過程，index.html文件存在在build目錄中，將index.html文件復(fù)制到對(duì)應(yīng)的服務(wù)服務(wù)器，并修改html源碼中的/build/index.css和/build/index.js地址，是上一步中得到的cdn地址以及站點(diǎn)標(biāo)題。
一個(gè)標(biāo)準(zhǔn)的HTML文件如下所示：
在線上環(huán)境我們強(qiáng)烈推薦使用production版本的React，而不是development版本。它們之間的區(qū)別除了體積之外，還包括一些針對(duì)線上環(huán)境的性能優(yōu)化。
到這里你已經(jīng)學(xué)會(huì)使用Iceworks創(chuàng)建一個(gè)項(xiàng)目并發(fā)布：）
【常見問題】
1、WebStorm/IDEA 編輯器卡頓現(xiàn)象由于項(xiàng)目在安裝依賴后，產(chǎn)生文件夾 node_modules 含有較多的碎小文件，編輯器在索引文件引起的卡頓。 WebStorm 中尤為明顯，可通過 exclude node_modules 目錄，不需要檢索該文件夾下的內(nèi)容。
2、如何設(shè)置網(wǎng)頁(yè)在瀏覽器 Tab 上面的 Icon (favicon)
細(xì)心的同學(xué)可能會(huì)看到頁(yè)面在瀏覽器 Tab 上面會(huì)有自定義的 Icon：
如果你想要在自己站點(diǎn)上面加上這個(gè) Icon 可以按照如下步驟添加：
準(zhǔn)備一個(gè) Icon，文件格式可以為 .png 或者 .ico，正方形，分辨率可以是 32x32px 或者 64x64px 文件體積要求盡可能小。
上傳 CDN 拿到一個(gè) url 或者在自己服務(wù)器配置靜態(tài)資源服務(wù)
在 HTML 頁(yè)面 標(biāo)簽里面添加如下代碼：
3、在 Iceworks 下載頁(yè)面點(diǎn)擊下載沒反應(yīng)怎么辦？
請(qǐng)檢查是否安裝 Adguard、AdBlock、xxx 安全助手等工具并被其攔截？因?yàn)?Iceworks 是二進(jìn)制可安裝程序，可能會(huì)被安全軟件攔截，如有攔截請(qǐng)點(diǎn)擊確認(rèn)或者臨時(shí)關(guān)閉相關(guān)攔截功能。
4、出現(xiàn)端口已占用啟動(dòng)失敗應(yīng)該如何處理？
當(dāng)你出現(xiàn)類似 Something is already running on port 4444. 或類似的報(bào)錯(cuò)時(shí)，可能是由于 Hosts 配置缺少 localhost 等相關(guān)配置。
【更新日志】
v1.3.1[修復(fù)] 創(chuàng)建 ICE Design Lite 異常的問題
