阿里飛冰ice(Iceworks)2.12.1 官方版

阿里專為前端開(kāi)發(fā)打造的一個(gè)客戶端，阿里飛冰ice(Iceworks)中有海量的可復(fù)用物料，許多配套的桌面工具和快速構(gòu)建的前端應(yīng)用，幫助前端設(shè)計(jì)者提升高效率。

功能介紹

模板自定義創(chuàng)建

提供多種垂直領(lǐng)域模板，快速創(chuàng)建項(xiàng)目，支持風(fēng)格切換，滿足個(gè)性化需求

區(qū)塊可視化組裝

海量物料自由搭配，輕松完成頁(yè)面組合可視化操作更得心應(yīng)手

布局自定義生成

模板內(nèi)置布局，同時(shí)提供交互式的定制功能生產(chǎn)專屬布局

物料自定義接入

官方提供海量的物料，覆蓋多種業(yè)務(wù)場(chǎng)景，也支持物料自定義接入，定制物料源

項(xiàng)目?jī)x表盤插件化

豐富多樣的項(xiàng)目信息面板，頁(yè)面信息，路由信息依賴管理等，配置專屬的Iceworks界面

使用教程

Iceworks 快速開(kāi)始

零環(huán)境搭建 零配置 簡(jiǎ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ō)明：

例如上一步已創(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 文件如下所示：

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

到這里你已經(jīng)學(xué)會(huì)使用 Iceworks 創(chuàng)建一個(gè)項(xiàng)目并發(fā)布：)

修改主題配色教程

為什么要修改

ICE Design 為 ICE 體系內(nèi)的組件和物料提供了指導(dǎo)性規(guī)范，但是我們也支持在一定程度內(nèi)對(duì)樣式風(fēng)格進(jìn)行個(gè)性化定制。

開(kāi)放的定制能力

皮膚風(fēng)格 (theme)

由 Layout 提供能力支持，當(dāng)前可傳入 dark 或者 light

主品牌色 (primaryColor)

Hex: 如 #ff0000, #f00

RGB: 如 rgb(255, 0, 0)

顏色常量: 如 red, yellow

支持 CSS 提供的顏色格式規(guī)范

副品牌色 (secondaryColor)

同上

我們也在考慮開(kāi)放更多可供定制的變量，如果以上變量不能滿足你的需求，可以給我們提 issue 進(jìn)行討論。

如何修改

請(qǐng)先確保您的 ice-scripts 已經(jīng)升級(jí)到 1.0.8 及以上版本。

修改項(xiàng)目目錄下的 package.json 文件如下所示：

{  "themeConfig": {    "theme": "dark",    "primaryColor": "red",    "secondaryColor": "grey"  }}

更新日志

2.12.1更新

特性：增加 Koa 模板生成過(guò)程中的錯(cuò)誤捕獲

修復(fù)：Windows 用戶生成 Koa 項(xiàng)目報(bào)錯(cuò)的問(wèn)題

修復(fù)：部分用戶生成的 Koa 模板代碼截?cái)嗟膯?wèn)題

修復(fù)：Ice Design Pro 模板 .webpackrc.js 文件在 client 目錄下的問(wèn)題

<a href='https://alibaba.github.io/ice/docs/advanced/webpackrc'>可以參考此文檔自定義項(xiàng)目的 webpack 配置</a>