飛冰GUI官方使用教程 Iceworks快速開始

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

Iceworks 是 ICE 推出的輔助開發(fā)者快速開發(fā)中后臺(tái)前端應(yīng)用的 GUI 軟件，目前支持 macOS 和 Windows 兩大平臺(tái)。通過(guò) Iceworks 點(diǎn)擊下載按鈕即可。
創(chuàng)建項(xiàng)目
軟件啟動(dòng)后，項(xiàng)目列表為空，可通過(guò)的【創(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)目管理面板。
通過(guò)項(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è) ICE Design CMS 模板啟動(dòng)后的預(yù)覽效果。
新建頁(yè)面
啟動(dòng)調(diào)試服務(wù)后，可使用新建頁(yè)面來(lái)搭建頁(yè)面，通過(guò) 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è)面的訪問地址，可通過(guò) 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)目，目前支持 Visual Studio Code，Sublime Text 3，WebStorm 和 Atom 等編輯器，推薦使用 Visual Studio Code，如果你的電腦中未安裝請(qǐng)先安裝。
項(xiàng)目目錄結(jié)構(gòu)說(shuō)明：

├── build // 打包資源
├── mock // 模擬數(shù)據(jù)
├── public // 靜態(tài)資源
├── src
│ ├── components // 公共組件
│ ├── config // 公共配置
│ ├── layouts // 通用布局
│ ├── pages // 頁(yè)面
│ ├── utils // 通用方法
│ ├── global.scss // 全局樣式
│ ├── index.html // 入口模板
│ ├── index.js // 應(yīng)用入口
│ └── routes.jsx // 路由入口
├── tests // 測(cè)試
├── .editorconfig // 代碼風(fēng)格配置
├── .eslintignore // eslint 忽略目錄配置
├── .eslintrc // eslint 配置
├── generator.json // generator.json
├── package.json // package.json
├── README.md // 項(xiàng)目說(shuō)明
└── yarn.lock // 模板版本管理
例如上一步已創(chuàng)建的 Page16 頁(yè)面：

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

打包發(fā)布

點(diǎn)擊項(xiàng)目面板上的構(gòu)建項(xiàng)目按鈕，將開發(fā)的構(gòu)建出比較終的 js css 等資源。
構(gòu)建完成后，會(huì)在項(xiàng)目目錄下生成 build 文件夾，里面存在了 index.html index.js index.css 文件。使用你熟悉的方式，上傳到對(duì)應(yīng)的 cdn 服務(wù)器。

Iceworks 2.15.0 官方64位版

• 軟件性質(zhì)：國(guó)產(chǎn)軟件
• 授權(quán)方式：免費(fèi)版
• 軟件語(yǔ)言：簡(jiǎn)體中文
• 軟件大�。�54799 KB
• 下載次數(shù)：322 次
• 更新時(shí)間：2019/4/1 22:05:50
• 運(yùn)行平臺(tái)：WinXP,Win7,...
• 軟件描述：飛冰（ICE）是一套基于 React 的中后臺(tái)應(yīng)用解決方案，在阿里巴巴內(nèi)部，已經(jīng)... [立即下載]