关于飞冰

官网链接：https://ice.work/

react物料git地址 https://github.com/ice-lab/react-materials

vue物料git地址 https://github.com/ice-lab/vue-materials

飞冰（ICE）诞生于阿里巴巴内部大量的中后台业务，我们在中后台场景沉淀了大量的物料、工具及经验，同时也抽象出一套从物料到项目的完整开发流程。如果你符合以下两种场景之一，那么欢迎了解下飞冰（ICE）体系

如果你所在的团队使用 React 开发前端项目，那么你可以最大限度的发挥飞冰（ICE）的能力：丰富的物料体系、完善的工程构建工具、GUI 开发能力，甚至你也可以定制私有的物料体系。

如果你所在的团队使用 Vue 或者其他框架开发前端项目，那么你可以基于飞冰（ICE）的工具体系开发私有的物料体系，然后通过可视化开发工具串联使用。

由于 ICE 优先使用 React 16+，其需要的最低 IE 版本为 11，如果您需要在以下的版本使用，您可能需要引入一些 polyfill 来支持 Map, Set 等特性

ICE（面向对象中间件）

网络通信引擎ICE(Internet Communications Engine)是Zero C公司的分布式系统开发专家实现的一种新的高性能的面向对象中间件平台。从根本上说， ICE 为构建面向对象的客户-服务器应用提供了工具、 API和库支持。

飞冰的物料主要分为三类：模板、区块、组件

模板

样板工程，通常会包含通用的布局、常用页面、工程配置等，常在初始化项目时使用

飞冰物料源（默认是react的） 35个

vue物料源 2个

angular物料源 1个

自定义模板：自己奢姿主题色调，布局

区块

与组件相比灵活性较高，功能相对比较简单，对应代码量也比较少，业务里会将区块的代码复制到项目里使用

组件

基础组件：同一公司同类业务应该只有一套基础组件，基础组件需要足够原子化以及灵活性，比如 Button, Menu 等

业务组件：面向业务的组件体系，一般功能比较确定同时复杂度较高，业务里通过 npm 依赖使用，不可随意更改业务组件代码

构建项目

1、基于ice-scripts 命令行构建（目前只支持react）

ice-scripts 是飞冰（ICE）React 链路的工程工具，类似 Vue CLI 之于 Vue 的关系。ice-scripts 提供了丰富的功能帮助我们开发 React 项目：

完善的命令行工具
支持项目/业务组件/区块的开发&构建
基于 Fusion 体系的主题配置
完善的自定义 webpack 配置
……

ice-scripts详细地址：https://ice.work/docs/cli/about

2、通过GUI工具Iceworks构建（支持，react、vue、angular）

创建项目教程地址 https://ice.work/docs/iceworks/about（还有工程管理，提交git）

windows、mac版本都有工具

构建vue项目步骤：

1、安装Iceworks，安装地址：https://ice.work/iceworks

2、模板-->vue物料源-->自己想要的模板-->使用模板（包含模板中的页面）

新建页面（点击工具上方添加页面选项，选择自己想要网页面中放入的区块，然后生成页）

在页面中添加区块，步骤跟新建页面基本一样；选择想要的区块下载，不会生成新的页面，只是添加到原有页面中

启动对应vue的 npm run dev

构建对应vue的 npm build （生成dist文件）

自定义模板------->使用 ice-devtools 开发自定义物料

自定义开发文档地址：

https://ice.work/docs/advanced/custom-materials

https://ice.work/docs/materials/init-dev

ice-devtools 用于物料的开发和管理，其本身不耦合任何前端框架或工程体系，这意味着基于 ice-devtools 可以开发 React/Vue/... 各种前端体系的物料。ice-devtools 具有以下特性：

支持物料的初始化以及管理能力
支持不同前端框架或工程的物料开发
支持同步到 fusion.design（仅支持 React 物料）或 unpkg（支持任何物料）
支持业务自定义模板能力
……

官方提供了react/vue的物料模板，react/vue用户可以直接基于这两套模板初始化

react参考：https://github.com/alibaba/ice/tree/master/templates/ice-react-material-template

vue参考： https://github.com/alibaba/ice/tree/master/templates/ice-vue-material-template

创建自定义物料

第一步：安装并创建项目

创建项目

$ npm install ice-devtools -g

$ mkdir xxx && cd xxx

$ ice-devtools init

区块预览

$ cd my-project/blocks/ExampleBlock

$ npm install

$ npm run start

模板预览

$ cd my-project/scaffolds/ExampleScaffold

$ npm install

$ npm run start

第二步：发布到npm官网进入到blocks目录下的ExampleBlock -> npm publish .

第三步：生成物料数据回到根目录下执行，生成一个build文件，生成的物料源数据就在build里面 $ npm run generate

第四步：目前这只是一份静态数据，想要在 iceworks 里使用这份物料的话需要参考下文将其托管到某些服务上生成一个 url。支持同步到 fusion.design（仅支持 React 物料）或 unpkg（支持任何物料）

第五步：添加到 Iceworks 内；设置->自定义物料源->新增->输入第四步生成的物料地址

谁在使用

淘宝中后台业务
飞猪中后台业务
阿里健康
村淘
优酷
阿里云
……

阿里飞冰的介绍以及使用相关推荐

可视化搭建前端工程 - 阿里飞冰了解一下
阿里飞冰官方网站 alibaba.github.io/ice 每次新做一个项目,无论大小都要干这些事: 框架选型初始化脚手架(比如使用 create-react-app 或者 vue-cli) 也可 ...
阿里飞冰使用教程-前端低代码可视化GUI速开发
飞冰可以帮你干什么? 以往建立前端工程,需要许多繁琐的步骤,现在使用飞冰,他可以直接帮你搭出一个架子,你在这个架子的基础上再开发就行,并且使用飞冰,你的前端页面完全可以通过GUI可视化自己拼接而成,类 ...
可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
阿里OSS--基本介绍
文章目录相关链接一.文件存储系统介绍 1.储存系统的选择二.阿里OSS的基础介绍介绍使用场景三.阿里OSS的基础概念存储空间(Bucket) 对象/文件(Object) Region(地 ...
阿里飞冰设置 vscode 编辑器启动脚本
文章目录检查vscode安装设置阿里飞冰编辑器检查vscode安装 win+R cmd code --version 设置阿里飞冰编辑器设置自定义编辑器启动脚本 code ${cwd}
阿里飞冰官网 icework，一个集成框架，一键创建一个前端系统
阿里飞冰 icework,一个集成框架,一键创建一个前端系统官方地址:https://alibaba.github.io/ice/
阿里飞冰官网 icework，一个集成框架，一键创建一个前端系统 https://ice.work/
阿里飞冰 icework,一个集成框架,一键创建一个前端系统官方地址:https://ice.work/ 申明不是广告
阿里研发:核心系统--中间件--阿里云--yunOS介绍
阿里研发:核心系统--中间件--阿里云--yunOS介绍分类: 1.1 自然科学 1.2.1.1 职业规划 1.3 学习方法 1.1.1 信息技术 1.1.1.1 操作系统OS 1.1.1.2 OS ...
阿里飞冰（Iceworks）入门和飞冰是干什么的
前言: 昨天技术总监告诉我个框架(Iceworks),又名飞冰,是阿里旗下的一个开发工具.也没说具体这个东西能解决什么问题.所以我最终的目的是为了知道这个框架有什么用,是干什么的. 引用飞冰官网的一句 ...

阿里飞冰的介绍以及使用

谁在使用

阿里飞冰的介绍以及使用相关推荐

最新文章

热门文章