飞冰Iceworks下载-Iceworks下载 v2.20.0官方版(飞冰 GUI)

Iceworks v2.20.0 正式版

语言:简体中文

大小:78.9M

类别:应用工具

时间:2025-03-28

软件介绍

  • Iceworks v2.20.0 正式版

飞冰Iceworks是由阿里巴巴推出的一款图形化界面中后台前端开发工具,具备强大的可视化编辑能力,通过配套的桌面工具可以快速构建前端应用。Iceworks集成了ICE物料体系和开发体验,ICE是一个基于React的中后台应用解决方案,在阿里巴巴内部已有270多个项目在使用。欢迎对该工具感兴趣的用户进行体验!

Iceworks(飞冰 GUI)

Iceworks使用指南

快速入门
零环境配置 零安装流程 简单直观
Iceworks是由ICE团队为帮助开发者快速创建中后台前端应用所推出的图形化开发工具,支持macOS和Windows两个操作系统。点击下载按钮即可开始安装。
创建项目
启动软件后,项目列表为空,点击【创建项目】按钮开始新建项目。

飞冰ice

页面会跳转到模板市场,提供了三种模板可供选择。将鼠标悬停在某个模板上,点击【以该模板创建项目】进入项目配置页面。

Iceworks(飞冰 GUI)

新建一个空文件夹或选择已有的文件夹(为避免覆盖原有文件)。
为项目命名,方便后续识别。
点击【开始创建项目】即可开始构建。
创建过程中,项目的依赖项会自动安装,时间较长时也可以选择取消,稍后再手动安装。

飞冰ice

管理项目
项目创建后,会自动显示在项目列表中,并打开该项目的管理面板。在管理面板中,你可以执行启动调试服务、新建页面、构建项目等操作。

启动调试服务
点击【启动调试服务】按钮,等待服务启动完成后,会显示服务地址,点击该地址即可预览当前的项目。

Iceworks(飞冰 GUI)

如上图所示,这是使用ICE Design CMS模板启动后的预览效果。
新建页面
启动调试服务后,点击【新建页面】开始搭建新页面。可以通过组合不同的block来构建页面。
进入block编辑界面。

飞冰ice

页面顶部显示了当前项目可用的布局(layout)方式,选择一种作为新页面的布局。
下方展示了可用的blocks,点击选中你需要的block并将其添加到已选区块列表中。
右侧则会显示所选block的缩略图预览。
选择好布局和blocks后,点击右下角的【生成页面】按钮,输入页面名和路由名。
页面名:生成的文件名称。
路由名:页面的访问地址,你可以通过 http://127.0.0.1:4444/#/xxxx 进行访问。
例如:创建了一个名为page16的页面,可以通过该地址访问到该页面。

Iceworks(飞冰 GUI)

进入开发调试
点击项目面板上的【编辑中打开】按钮,会在你选择的编辑器中打开项目文件。目前支持的编辑器有Visual Studio Code、Sublime Text 3、WebStorm和Atom等,推荐使用Visual Studio Code。如果你还未安装,可以先进行安装。
项目目录结构说明:

飞冰ice

例如,上一部分中创建的Page16页面:

Iceworks(飞冰 GUI)

此时可以通过二次开发来增加业务逻辑,满足具体的业务需求。
打包发布
点击项目面板上的【构建项目】按钮,打包出最终的js、css等资源文件。
打包完成后,会在项目目录下生成一个build文件夹,里面包含了index.html、index.js、index.css等文件。你可以将这些文件上传到相应的CDN服务器进行发布。

飞冰ice

部署上线
将构建好的index.html文件上传到服务器,并修改html文件中的/css和/js路径为刚才上传的cdn地址。
以下是一个标准的HTML文件:

Iceworks(飞冰 GUI)

在线上环境中,强烈建议使用React的生产版(production)而非开发版(development),因为生产版在体积和性能方面都做了优化。

以上就是kk下载小编为大家介绍的Iceworks官方版使用方法!

展开全部
收起