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

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