icework怎么用?阿里Iceworks下载安装步骤以及使用教程

所属分类: 软件教程 / 编程开发 阅读数: 984
收藏 0 赞 0 分享

Iceworks(飞冰 GUI)是一款非常好用且功能强大的图形化界面的开发平台,它承载了ICE的物料体系和开发体验,飞冰(ICE)是一套基于React的中后台应用解决方案,在阿里巴巴内部,已经有270多个来自几乎所有BU的项目在使用,欢迎有需要此款工具的朋友们前来下载使用。

安装破解教程

1、在本站下载并解压,双击Iceworks-setup-2.12.0.exe运行,如图所示,稍等一会儿

2、安装完成,软件自动运行,界面如图所示使用方法

  Iceworks 快速开始

  零环境搭建 零配置 简单易用

  Iceworks 是 ICE 推出的辅助开发者快速开发中后台前端应用的 GUI 软件,目前支持 macOS 和 Windows 两大平台。通过 Iceworks 点击下载按钮即可。

  创建项目

  软件启动后,项目列表为空,可通过的【创建项目】新建一个项目。

飞冰ice

  界面会跳转到模板市场,目前提供三种模板进行选择,鼠标移动到指定的模板上,点击【以该模板创建项目】进入项目配置页面。

Iceworks(飞冰 GUI)

  新建一个文件夹或者选择已有的空文件夹(避免覆盖原有文件)。

  给项目起一个项目名,以便后续识别。

  点击【开始创建项目】即可开始创建

  默认会在创建的时候同时安装项目依赖,时间上会相对久一些,也可取消勾选,后续自行安装

  管理项目

  项目创建完成后,会自动添加到项目列表中,并打开当前项目管理面板。

  通过项目管理面板,可执行 启动调试服务 新建页面 构建项目 等操作。

飞冰ice

  启动调试服务

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

Iceworks(飞冰 GUI)

  上图是一个 ICE Design CMS 模板启动后的预览效果。

  新建页面

  启动调试服务后,可使用新建页面来搭建页面,通过 block 的组合完成页面的创建。

  进入 block 搭建界面

飞冰ice

  上方列出了当前项目可用的 layout 布局方式,选中任一一个作为新页面的布局。

  下方列出了当前可选择的 blocks, 点击即可选择该 block 到已选区块列表中。

  右侧为选中 block 组合的缩略图预览。

  选择 layout 以及 block 后,点击右下角生成页面,会提示输入页面名,路由名,可以定义需要的名称,

  页面名:表示生成的文件名称。

  路由名:表示页面的访问地址,可通过 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

  部署上线

  上线过程即发布 HTML 文件的过程,index.html 文件存在在 build 目录中,将 index.html 文件复制到对应的服务服务器,并修改 html 源码中的 /build/index.css 和 /build/index.js 地址,是上一步中得到的 cdn 地址以及站点标题。

  一个标准的 HTML 文件如下所示:

Iceworks(飞冰 GUI)

  在线上环境我们强烈推荐使用 production 版本的 React,而不是 development 版本。它们之间的区别除了体积之外,还包括一些针对线上环境的性能优化。

  到这里你已经学会使用 Iceworks 创建一个项目并发布:)

更新日志

  特性:ICELAND 可视化区块搭建 Beta 版本发布,一键生成代码,直观简单

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

  修复:导航页面创建项目弹窗的样式问题

  修复:无项目时,改变窗口大小产生的报错

更多精彩内容其他人还在看

精易模块新手入门图文教程

精易模块是最好用的开源易模块,全中文命令,多个常用类功能,采用windows Api+核心命令打造,性能强大、使用简单、功能免费、免费开源,这篇文章主要介绍了精易模块新手入门图文教程,需要的朋友可以参考下
收藏 0 赞 0 分享

scratch3.0怎么制作会变色的鹦鹉动画?

scratch3.0怎么制作会变色的鹦鹉动画?scratch3.0中想要制作一个会变色的鹦鹉,该怎么制作这个效果呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

windows下jdk安装图解(覆盖安装报错)

这篇文章主要介绍了windows下jdk安装图解,覆盖安装报错,第一次安装和第二次安装区别,需要的朋友可以参考下
收藏 0 赞 0 分享

Java配置 JDK开发环境搭建及环境变量配置详细图文教程

这篇文章主要介绍了Java配置 JDK开发环境搭建及环境变量配置详细图文教程,需要的朋友可以参考下
收藏 0 赞 0 分享

IntelliJ IDEA搭建Android开发环境图文详解

这篇文章主要介绍了IntelliJ IDEA搭建Android开发环境图文详解,需要的朋友可以参考下
收藏 0 赞 0 分享

visual studio 2019的安装以及使用方法

这篇文章主要介绍了visual studio 2019的安装以及使用图文方法,一款专为帮助程序设计人员更好,设计更优质程序开发的功能强大,需要的朋友可以参考下
收藏 0 赞 0 分享

基于IntelliJ IDEA 13搭建Android集成开发环境(图文教程)

使用IntelliJ IDEA搭建Android集成开发环境,但是感觉不详细,所以打算自己整理一个详细的图文教程,希望能对新手(包括自己)有所帮助,需要的朋友可以参考下
收藏 0 赞 0 分享

代码自动生成工具ASP.NET Maker 2020安装及激活教程(附注册机下载)

ASP.NET Maker 2020如何激活?ASP.NET Maker 2020一款功能强大的自动化代码生成器,下文中详细的介绍了本软件的安装及激活教程,另附上注册机下载,感兴趣的朋友不妨阅读下文内容,参考一下吧
收藏 0 赞 0 分享

python运行环境搭建和pycharm的安装配置及汉化(零基础小白版)

写这篇文章主要是介绍一下python的环境搭建和pycharm的安装配置,适合零基础的同学观看。这篇文章你会学到python的环境搭建和python比较好用的IDE pycharm的安装与基础配置
收藏 0 赞 0 分享

IntelliJ WebStorm 2020.3.3 最新激活教程 附汉化补丁安装教程

今天脚本小编给大家分享的是IntelliJ WebStorm 2020.3.3最新激活补丁和汉化补丁的安装激活教程,此款软件的激活比较麻烦,每个版本激活方法都不一样,所以小编就给大家分享了详细的安装激活教程,此教程是小编一步一步安装得来,所以真实有效,大家放心按照步骤安装即可
收藏 0 赞 0 分享
查看更多