icework怎么用?阿里Iceworks下載安裝步驟以及使用教程

Iceworks(飛冰 GUI)是一款非常好用且功能強(qiáng)大的圖形化界面的開發(fā)平臺,它承載了ICE的物料體系和開發(fā)體驗(yàn),飛冰(ICE)是一套基于React的中后臺應(yīng)用解決方案,在阿里巴巴內(nèi)部,已經(jīng)有270多個來自幾乎所有BU的項(xiàng)目在使用,歡迎有需要此款工具的朋友們前來下載使用。
安裝破解教程
1、在本站下載并解壓,雙擊Iceworks-setup-2.12.0.exe運(yùn)行,如圖所示,稍等一會兒
2、安裝完成,軟件自動運(yùn)行,界面如圖所示使用方法
Iceworks 快速開始
零環(huán)境搭建 零配置 簡單易用
Iceworks 是 ICE 推出的輔助開發(fā)者快速開發(fā)中后臺前端應(yīng)用的 GUI 軟件,目前支持 macOS 和 Windows 兩大平臺。通過 Iceworks 點(diǎn)擊下載按鈕即可。
創(chuàng)建項(xiàng)目
軟件啟動后,項(xiàng)目列表為空,可通過的【創(chuàng)建項(xiàng)目】新建一個項(xiàng)目。
界面會跳轉(zhuǎn)到模板市場,目前提供三種模板進(jìn)行選擇,鼠標(biāo)移動到指定的模板上,點(diǎn)擊【以該模板創(chuàng)建項(xiàng)目】進(jìn)入項(xiàng)目配置頁面。
新建一個文件夾或者選擇已有的空文件夾(避免覆蓋原有文件)。
給項(xiàng)目起一個項(xiàng)目名,以便后續(xù)識別。
點(diǎn)擊【開始創(chuàng)建項(xiàng)目】即可開始創(chuàng)建
默認(rèn)會在創(chuàng)建的時候同時安裝項(xiàng)目依賴,時間上會相對久一些,也可取消勾選,后續(xù)自行安裝
管理項(xiàng)目
項(xiàng)目創(chuàng)建完成后,會自動添加到項(xiàng)目列表中,并打開當(dāng)前項(xiàng)目管理面板。
通過項(xiàng)目管理面板,可執(zhí)行 啟動調(diào)試服務(wù) 新建頁面 構(gòu)建項(xiàng)目 等操作。
啟動調(diào)試服務(wù)
點(diǎn)擊 啟動調(diào)試服務(wù) 等待完成后出現(xiàn)服務(wù)地址,點(diǎn)擊可以預(yù)覽當(dāng)前項(xiàng)目。
上圖是一個 ICE Design CMS 模板啟動后的預(yù)覽效果。
新建頁面
啟動調(diào)試服務(wù)后,可使用新建頁面來搭建頁面,通過 block 的組合完成頁面的創(chuàng)建。
進(jìn)入 block 搭建界面
上方列出了當(dāng)前項(xiàng)目可用的 layout 布局方式,選中任一一個作為新頁面的布局。
下方列出了當(dāng)前可選擇的 blocks, 點(diǎn)擊即可選擇該 block 到已選區(qū)塊列表中。
右側(cè)為選中 block 組合的縮略圖預(yù)覽。
選擇 layout 以及 block 后,點(diǎn)擊右下角生成頁面,會提示輸入頁面名,路由名,可以定義需要的名稱,
頁面名:表示生成的文件名稱。
路由名:表示頁面的訪問地址,可通過 http://127.0.0.1:4444/#/xxxx 訪問到對應(yīng)的路由頁面。
示例中,創(chuàng)建了 page16 訪問后即可看到剛搭建的頁面了。
進(jìn)入開發(fā)調(diào)試
點(diǎn)擊項(xiàng)目版面上的 編輯中打開 會立即使用設(shè)置中選擇的編輯器打開項(xiàng)目,目前支持 Visual Studio Code,Sublime Text 3,WebStorm 和 Atom 等編輯器,推薦使用 Visual Studio Code,如果你的電腦中未安裝請先安裝。
項(xiàng)目目錄結(jié)構(gòu)說明:
例如上一步已創(chuàng)建的 Page16 頁面:
通過二次開發(fā)增加業(yè)務(wù)邏輯,完成業(yè)務(wù)需求。
打包發(fā)布
點(diǎn)擊項(xiàng)目面板上的構(gòu)建項(xiàng)目按鈕,將開發(fā)的構(gòu)建出最終的 js css 等資源。
構(gòu)建完成后,會在項(xiàng)目目錄下生成 build 文件夾,里面存在了 index.html index.js index.css 文件。使用你熟悉的方式,上傳到對應(yīng)的 cdn 服務(wù)器。
部署上線
上線過程即發(fā)布 HTML 文件的過程,index.html 文件存在在 build 目錄中,將 index.html 文件復(fù)制到對應(yīng)的服務(wù)服務(wù)器,并修改 html 源碼中的 /build/index.css 和 /build/index.js 地址,是上一步中得到的 cdn 地址以及站點(diǎn)標(biāo)題。
一個標(biāo)準(zhǔn)的 HTML 文件如下所示:
在線上環(huán)境我們強(qiáng)烈推薦使用 production 版本的 React,而不是 development 版本。它們之間的區(qū)別除了體積之外,還包括一些針對線上環(huán)境的性能優(yōu)化。
到這里你已經(jīng)學(xué)會使用 Iceworks 創(chuàng)建一個項(xiàng)目并發(fā)布:)
更新日志
特性:ICELAND 可視化區(qū)塊搭建 Beta 版本發(fā)布,一鍵生成代碼,直觀簡單
修復(fù):向已有頁面添加區(qū)塊的彈窗的樣式問題
修復(fù):導(dǎo)航頁面創(chuàng)建項(xiàng)目彈窗的樣式問題
修復(fù):無項(xiàng)目時,改變窗口大小產(chǎn)生的報錯
相關(guān)文章
WebStorm如何調(diào)試Vue項(xiàng)目? webstorm配置vue開發(fā)環(huán)境指南
WebStorm 支持多種調(diào)試工具,包括瀏覽器的開發(fā)者工具,但本文主要講解的是使用 WebStorm 自帶的調(diào)試功能2025-04-15VSCode和webstorm怎么設(shè)置綠色護(hù)眼背景? 綠豆沙背景色的設(shè)置方法
護(hù)眼色一定程度能保護(hù)眼睛,緩解疲勞,VSCode和webstorm這兩款常用的軟件怎么設(shè)置護(hù)眼色呢?詳細(xì)請看下文介紹2025-04-15WebStorm常用插件以及實(shí)用設(shè)置分享
WebStorm本身已經(jīng)足夠強(qiáng)大,但一些優(yōu)秀的插件能錦上添花,顯著提升開發(fā)效率,詳細(xì)請看下文介紹2025-04-15如何安裝配置WebStorm? WebStorm安裝與使用全方位指南
WebStorm軟件在前端和后端開發(fā)領(lǐng)域都備受青睞,很多朋友不知道該怎么下載安裝,下面我們就來看看詳細(xì)的安裝配置教程2025-04-15Webstorm怎么配置? Webstorm入門之軟件配置教程
WebStorm是一款功能強(qiáng)大的集成開發(fā)環(huán)境(IDE),支持各種前端開發(fā)技術(shù),今天我們就來看看Webstorm的配置教程2025-04-15Webstorm怎么設(shè)置字體大小/背景顏色/背景圖片?
WebStorm 允許您自定義界面顏色,以創(chuàng)建更個性化和美觀的工作空間,今天我們就來看看Webstorm改變字體大小、背景顏色、設(shè)置背景圖片的方法2025-04-15- VScode上安裝PlatformIO插件能成功安裝,嘗試卸載VScode并刪除插件,這些錯誤仍然存在,下面我們就來看看這個問題的解決辦法2025-04-03
提升代碼搜索效率! VSCode里DeepSeek插件安裝與配置指南
今天我們將向大家介紹如何在Visual Studio Code中安裝并配置 DeepSeek 插件,幫助你更高效地進(jìn)行代碼搜索2025-04-07提升你的編程效率! VSCode的初級使用教程超詳細(xì)版
VSCode是一款免費(fèi)且開源的代碼編輯器,因其強(qiáng)大的功能和良好的用戶體驗(yàn)而廣受歡迎,本文將詳細(xì)介紹 VSCode 的基本使用方法,并通過插圖幫助你更好地理解2025-04-03- 今天我們來聊聊如何安裝和配置VS Code,讓它成為你編程路上的得力助手,這個過程其實(shí)很簡單,只要跟著我的步驟走,你絕對能搞定2025-04-03