介绍： ice 又名，飞冰。海量可复用物料，通过 GUI 工具极速构建中后台应用。是阿里巴巴前端团队最近开源的一个产品，仅仅一天的时间，就收到了2800多个 star。本文介绍它的一些简单用法。 飞冰的特点：海量高质量物料，每周有新增，专业视觉设计，海量物料满足你开发之所需。 GUI 工具： 零配置的工程整合，物料可视化一键导入复用。 ICE DESIGN 设计语言： “冻”人的中后台设计语言。 在 ice 的官网上，我们发现有非常多的案例模板，或者称为模块更为合适。像是模块化开发一样，你所需要的所有功能基本上都能在官网中的块列表中找到。 项目开发和使用方式： 下载 Iceworks 并创建项目，然后创建页面进行物料搭建组合，之后可以打开编辑器进行二次编码，完成之后点击构建即可打包出可用的 JS、CSS bundle。 详细步骤请参见文档：Iceworks 快速上手。 物料开发和发布方式： 首先 clone 当前仓库，开发完成之后提交 PR 合并后执行下面相关命令：
- npm run bootstrap 初始化 Lerna
- npm run lint 代码 Lint 风格检查
- npm run publish 代码发布
界面会跳转到模板市场，目前提供三种模板进行选择，鼠标移动到指定的模板上，点击【以该模板创建项目】进入项目配置页面。
- 新建一个文件夹或者选择已有的空文件夹（避免覆盖原有文件）。
- 给项目起一个项目名，以便后续识别。
启动调试服务
点击 启动调试服务 等待完成后出现服务地址，点击可以预览当前项目。
上图是一个 Ice Design CMS 模板启动后的预览效果。
新建页面
启动调试服务后，可使用新建页面来搭建页面，通过 block 的组合完成页面的创建。
进入 block 搭建界面
上方列出了当前项目可用的 layout 布局方式，选中任一一个作为新页面的布局。 下方列出了当前可选择的 blocks, 点击即可选择该 block 到已选区块列表中。 右侧为选中 block 组合的缩略图预览。 选择 layout 以及 block 后，点击右下角生成页面，会提示输入页面名，路由名，可以定义需要的名称，
- 页面名：表示生成的文件名称。
- 路由名：表示页面的访问地址，可通过 http://127.0.0.1:4444/#/xxxx 访问到对应的路由页面。
进入开发调试
点击项目版面上的 编辑中打开 会立即使用设置中选择的编辑器打开项目，目前支持 Visual Studio Code，Sublime Text 3，WebStorm 和 Atom 等编辑器，推荐使用 Visual Studio Code，如果你的电脑中未安装请先安装。
项目目录结构说明：
project-name
├── 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 页面：
<!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://www.xttblog.com/xxx/.../xttblog.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://www.xttblog.com/xxx/.../react-dom.development.js"></script> <script type="text/javascript" src="./index.js"></script></body> </html>
在线上环境强烈推荐使用 production 版本的 React，而不是 development 版本。它们之间的区别除了体积之外，还包括一些针对线上环境的性能优化。 原文： https://www.xttblog.com/?p=2574