Iceworks

Iceworks是由飞冰ICE倾情推出的一款开源编程开发GUI软件，旨在助力开发者高效快速地构建中后台前端应用。目前，该软件已全面支持macOS与Windows两个平台，感兴趣的朋友不妨立即下载体验一番！

软件介绍

飞冰Iceworks工具，作为一款图形化界面的开发平台，承载了ICE的物料体系与开发体验。飞冰(ICE)是一套基于Re的中后台应用解决方案，在阿里巴巴内部，已有超过270个来自各个业务单元的项目在积极使用，若有需求，快来下载吧！

Iceworks使用方法

您只需通过 Iceworks 点击下载按钮，即可轻松获取。

创建项目
软件启动后，初始项目列表为空，您可以通过【创建项目】按钮新建一个项目。

界面将跳转至模板市场，您可从中选择三种可用模板。将鼠标移动至所选模板上，点击【以该模板创建项目】以进入项目配置页面。

您可以新建一个文件夹或选择一个空文件夹（以避免覆盖原有文件）。
为项目命名，以便后续识别。
点击【开始创建项目】即可启动创建过程。
默认情况下，创建时会同时安装项目依赖，时间可能稍长，您也可以选择取消勾选，后续自行安装。
管理项目
项目创建完成后，将自动添加至项目列表中，并打开当前项目管理面板。
在项目管理面板中，可以执行启动调试服务、新建页面、构建项目等操作。

启动调试服务
点击启动调试服务，等待完成后将出现服务地址，点击即可预览当前项目。

上图展示了ICE Design CMS模板启动后的预览效果。
新建页面
启动调试服务后，您可以使用新建页面功能进行页面搭建，通过block的组合来实现页面的创建。
进入block搭建界面。

上方展示了当前项目可用的layout布局方式，您可选择任一作为新页面的布局。
下方列出了可选择的blocks，点击即可将该block添加至已选区块列表中。
右侧为选中block组合的缩略图预览。
选择layout以及block后，点击右下角生成页面，系统将提示输入页面名和路由名，您可以定义所需的名称，
页面名：表示生成的文件名称。
路由名：表示页面的访问地址，您可通过 http://127.0.0.1:4444/#/xxxx 访问对应的路由页面。
在示例中，创建了page16，访问后即可见到刚搭建的页面。

进入开发调试
点击项目面板上的编辑按钮，即可使用您在设置中选择的编辑器打开项目。目前支持Visual Studio Code、Sublime Text 3、WebStorm和Atom等编辑器，推荐使用Visual Studio Code，如您尚未安装，请先行安装。
项目目录结构说明：

例如，上一步所创建的Page16页面：

通过二次开发，增加业务逻辑，以满足业务需求。
打包发布
点击项目面板上的构建项目按钮，将开发成果构建为最终的js、css等资源。
构建完成后，将在项目目录下生成build文件夹，里面包含index.html、index.js、index.css文件。您可以使用熟悉的方式，将其上传到相应的cdn服务器。

部署上线
上线过程即是发布HTML文件的过程，index.html文件位于build目录中。将该文件复制到相应的服务器，并修改HTML源码中的/build/index.css和/build/index.js地址为上一步中的cdn地址及站点标题。
一个标准的HTML文件格式如下所示：

在生产环境中，我们强烈推荐使用生产版本的React，而非开发版本。它们之间的区别不仅在于体积，还包括一些针对生产环境的性能优化。
至此，您已学会如何使用Iceworks创建并发布项目：）

常见问题

WebStorm/IDEA编辑器卡顿现象

由于项目在安装依赖后，生成的node_modules文件夹中包含大量碎小文件，导致编辑器在索引文件时出现卡顿现象，WebStorm中尤为明显。您可以通过排除node_modules目录，避免检索该文件夹下的内容。

如何设置网页在Tab上面的Icon (favicon)

细心的朋友可能会注意到，页面在浏览器Tab上方会显示自定义的Icon：

若您希望在自己的网站上添加此Icon，可以按照以下步骤进行：

准备一个Icon，文件格式可为.png或.ico，要求为正方形，分辨率可为32x32px或64x64px，文件体积尽量小。

将其上传至CDN以获取URL，或在自己的服务器上配置静态资源服务。

在HTML页面的标签中添加如下代码：<link rel="shortcut icon" href="your-icon-url">

如此便可成功添加！

更新日志

特性：ICELAND可视化区块搭建Beta版本发布，一键生成代码，直观便捷。

修复：已修正向已有页面添加区块的弹窗样式问题。

修复：已修正导航页面创建项目弹窗的样式问题。

修复：已修正无项目时改变窗口大小所产生的错误。