ice?又名，飛冰。海量可復(fù)用物料，通過(guò) GUI 工具極速構(gòu)建中后臺(tái)應(yīng)用。是阿里巴巴前端團(tuán)隊(duì)最近開(kāi)源的一個(gè)產(chǎn)品，僅僅一天的時(shí)間，就收到了2800多個(gè) star。本文介紹它的一些簡(jiǎn)單用法。

飛冰的特點(diǎn)

⚡️?海量高質(zhì)量物料：?每周有新增，專業(yè)視覺(jué)設(shè)計(jì)，海量物料滿足你開(kāi)發(fā)之所需。

🎯?GUI 工具：?零配置的工程整合，物料可視化一鍵導(dǎo)入復(fù)用。

🎨?ICE DESIGN 設(shè)計(jì)語(yǔ)言：?“凍”人的中后臺(tái)設(shè)計(jì)語(yǔ)言。

在 ice 的官網(wǎng)上，我們發(fā)現(xiàn)有非常多的案例模板，或者稱為模塊更為合適。像是模塊化開(kāi)發(fā)一樣，你所需要的所有功能基本上都能在官網(wǎng)中的塊列表中找到。

項(xiàng)目開(kāi)發(fā)和使用方式

下載?Iceworks?并創(chuàng)建項(xiàng)目，然后創(chuàng)建頁(yè)面進(jìn)行物料搭建組合，之后可以打開(kāi)編輯器進(jìn)行二次編碼，完成之后點(diǎn)擊構(gòu)建即可打包出可用的 JS、CSS bundle。

詳細(xì)步驟請(qǐng)參見(jiàn)文檔：Iceworks 快速上手。

物料開(kāi)發(fā)和發(fā)布方式

首先 clone 當(dāng)前倉(cāng)庫(kù)，開(kāi)發(fā)完成之后提交 PR 合并后執(zhí)行下面相關(guān)命令：

• npm run bootstrap?初始化 Lerna
• npm run lint?代碼 Lint 風(fēng)格檢查
• npm run publish?代碼發(fā)布

零環(huán)境搭建

Iceworks 是 ICE 推出的輔助開(kāi)發(fā)者快速開(kāi)發(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)擊【開(kāi)始創(chuàng)建項(xiàng)目】即可開(kāi)始創(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)目列表中，并打開(kāi)當(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è)面的訪問(wèn)地址，可通過(guò)?http://127.0.0.1:4444/#/xxxx?訪問(wèn)到對(duì)應(yīng)的路由頁(yè)面。

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

進(jìn)入開(kāi)發(fā)調(diào)試

點(diǎn)擊項(xiàng)目版面上的?編輯中打開(kāi)?會(huì)立即使用設(shè)置中選擇的編輯器打開(kāi)項(xiàng)目，目前支持?Visual Studio Code，Sublime Text 3，WebStorm?和?Atom?等編輯器，推薦使用?Visual Studio Code，如果你的電腦中未安裝請(qǐng)先安裝。

項(xiàng)目目錄結(jié)構(gòu)說(shuō)明：

project-name
├── 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ò)二次開(kāi)發(fā)增加業(yè)務(wù)邏輯，完成業(yè)務(wù)需求。

打包發(fā)布

點(diǎn)擊項(xiàng)目面板上的構(gòu)建項(xiàng)目按鈕，將開(kāi)發(fā)的構(gòu)建出最終的 js css 等資源。

構(gòu)建完成后，會(huì)在項(xiàng)目目錄下生成?build?文件夾，里面存在了?index.html?index.js?index.css?文件。使用你熟悉的方式，上傳到對(duì)應(yīng)的 cdn 服務(wù)器。

部署上線

上線過(guò)程即發(fā)布 HTML 文件的過(guò)程，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 文件如下所示：

<!DOCTYPE html>
<html>
<head>
??<meta charset="utf-8" />
??<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
??<link rel="icon" type="image/png" >
??<meta name="viewport" content="width=device-width">
??<title>ICE Design CMS</title>
<link href="./index.css" rel="stylesheet"></head>
<body>
??<div id="ice-container"></div>
??<script src="https://www.xttblog.com/xxx/.../react-dom.development.js"></script>
<script type="text/javascript" src="./index.js"></script></body>
</html>

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

總結(jié)

以上是生活随笔為你收集整理的阿里巴巴开源前端工具 ice飞冰简易教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。