极速手机网

飞冰GUI官方使用教程 Iceworks快速开始

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

Iceworks 是 ICE 推出的辅助开发者快速开发中后台前端应用的 GUI 软件,目前支持 macOS 和 Windows 两大平台。通过 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,如果你的电脑中未安装请先安装。
项目目录结构说明:

├── build // 打包资源
├── mock // 模拟数据
├── public // 静态资源
├── src
│ ├── components // 公共组件
│ ├── config // 公共配置
│ ├── layouts // 通用布局
│ ├── pages // 页面
│ ├── utils // 通用方法
│ ├── global.scss // 全局样式
│ ├── index.html // 入口模板
│ ├── index.js // 应用入口
│ └── routes.jsx // 路由入口
├── tests // 测试
├── .editorconfig // 代码风格配置
├── .eslintignore // eslint 忽略目录配置
├── .eslintrc // eslint 配置
├── generator.json // generator.json
├── package.json // package.json
├── README.md // 项目说明
└── yarn.lock // 模板版本管理
例如上一步已创建的 Page16 页面:

图:快速开始

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

打包发布

点击项目面板上的构建项目按钮,将开发的构建出比较终的 js css 等资源。
构建完成后,会在项目目录下生成 build 文件夹,里面存在了 index.html index.js index.css 文件。使用你熟悉的方式,上传到对应的 cdn 服务器。

图:快速开始

相关下载

下载Iceworks

Iceworks

大小:53.51 MB

相关软件

大家都在找