闪电下载吧 最新软件 免费软件 绿色软件

教程资讯 软件专题

您的位置:SD124 > 网络资源 > 软件教程 > icework怎么用?阿里Iceworks 2.12下载安装和使用教程

icework怎么用?阿里Iceworks 2.12下载安装和使用教程

软件教程 发布日期:2018-11-02  浏览: 次 网友评论
Iceworks(飞冰GUI) v2.12.0官方免费版
  • 授权:共享软件
  • 类型:国产软件
  • 语言:简体中文
  • 大小:未知
  • 日期:2018-11-02
  • 环境:Win2003WinXPWi...
Iceworks 是 ICE 推出的辅助开发者快速开发中后台前端应用的 GUI 软件,飞冰包含了一条从设计端到开发端的完整链路,帮助我们的用户快速搭建属于自己的中后台应用,旨在提高中后台系统的开发效率,集开发和调试于一体,集成运行环境零配置运行,使用为用户提供了丰富的模板,不同的领域应有尽有,可一键完成前端创建,海量的物料自由搭配,专业的视觉设计,自定义主题配置,响应式设计,零环境搭建 零配置 简单易用,绝对能够满足您的开发需求!

安装破解教程

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

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

功能特色

1、让前端开发简单而友好
海量可复用物料,配套桌面工具极速构建前端应用,效率提升 100%
2、模板自定义创建
提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求
3、区块可视化组装
海量物料自由搭配,轻松完成页面组合可视化操作更得心应手
4、布局自定义生成
模板内置布局,同时提供交互式的定制功能生产专属布局
5、物料自定义接入
官方提供海量的物料,覆盖多种业务场景,也支持物料自定义接入,定制物料源
6、项目仪表盘插件化
丰富多样的项目信息面板,页面信息,路由信息依赖管理等,配置专属的Iceworks界面

使用说明

物料体系  
在飞冰中,组件、区块、布局、模板等统称为物料,由飞冰团队维护,在内部有一套完整的开发规范和工具,目前也正在逐步对外开放中;基于此,你可以参与共建飞冰,也可以自建私有的物料体系。  
组件:最基础的物料,目前飞冰的基础组件达到55+,具有高度可复用性。  
区块:通过对大量的中后台系统常用的场景进行分类、对比和抽象,基于基础组件组合而成,目前飞冰的区块达到110+,可以通过iceworks进行快速组合搭建应用,减少重复的开发,提升效率。  
布局:在中后台系统中布局通常较为统一,以顶部-侧边布局-通栏模式为主,为此我们提供了4+常见的布局,支持light和dark两套主题。  
模板:基于已有的区块搭建而成,目前提供了4+的特定领域的模板,可以从零开始搭建应用,也可以选择特定类型的模板开始使用。‘

使用帮助

1、创建项目
软件启动后,项目列表为空,可通过的【创建项目】新建一个项目。
界面会跳转到模板市场,目前提供三种模板进行选择,鼠标移动到指定的模板上,点击【以该模板创建项目】进入项目配置页面。
    新建一个文件夹或者选择已有的空文件夹(避免覆盖原有文件)。
    给项目起一个项目名,以便后续识别。
点击【开始创建项目】即可开始创建
    默认会在创建的时候同时安装项目依赖,时间上会相对久一些,也可取消勾选,后续自行安装
2、管理项目
项目创建完成后,会自动添加到项目列表中,并打开当前项目管理面板。
通过项目管理面板,可执行 启动调试服务 新建页面 构建项目 等操作。
3、启动调试服务
点击 启动调试服务 等待完成后出现服务地址,点击可以预览当前项目。
    上图是一个 ICE Design CMS 模板启动后的预览效果。
4、新建页面
启动调试服务后,可使用新建页面来搭建页面,通过 block 的组合完成页面的创建。
进入 block 搭建界面
上方列出了当前项目可用的 layout 布局方式,选中任一一个作为新页面的布局。
下方列出了当前可选择的 blocks, 点击即可选择该 block 到已选区块列表中。
右侧为选中 block 组合的缩略图预览。
选择 layout 以及 block 后,点击右下角生成页面,会提示输入页面名,路由名,可以定义需要的名称,
    页面名:表示生成的文件名称。
    路由名:表示页面的访问地址,可通过 http://127.0.0.1:4444/#/xxxx 访问到对应的路由页面。
示例中,创建了 page16 访问后即可看到刚搭建的页面了。
5、进入开发调试
点击项目版面上的 编辑中打开 会立即使用设置中选择的编辑器打开项目,目前支持 Visual Studio Code,Sublime Text 3,WebStorm 和 Atom 等编辑器,推荐使用 Visual Studio Code,如果你的电脑中未安装请先安装。
项目目录结构说明:

例如上一步已创建的 Page16 页面:

 

通过二次开发增加业务逻辑,完成业务需求。

6、打包发布

点击项目面板上的构建项目按钮,将开发的构建出最终的 js css 等资源。

构建完成后,会在项目目录下生成 build 文件夹,里面存在了 index.html index.js index.css 文件。使用你熟悉的方式,上传到对应的 cdn 服务器。

 

7、部署上线

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

一个标准的 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" href="https://img.alicdn.com/tps/TB1kBU7NpXXXXXLXXXXXXXXXXXX-160-160.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://g.alicdn.com/code/npm/??react/16.2.0/umd/react.development.js,react-dom/16.2.0/umd/react-dom.development.js"></script>
<script type="text/javascript" src="./index.js"></script></body>

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

本文地址:http://www.sd124.com/article/2018/1102/226726.html
《icework怎么用?阿里Iceworks 2.12下载安装和使用教程》由闪电下载吧整理并发布,欢迎转载!

  • 相关文章:
  • 相关软件:
本周热点
本月热点
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 网站标签
有任何意见或者建议请联系邮箱:858898909[at]qq.com 本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!
Copyright © 2012 SDBETA.com. All Rights Reserved 豫ICP备12021367号 豫公网安备 41019702002546号闪电下载吧