可视化搭建前端工程 - 阿里飞冰了解一下

阿里飞冰官方网站 alibaba.github.io/ice

每次新作一个项目，不管大小都要干这些事：

• 框架选型
• 初始化脚手架（好比使用 create-react-app 或者 vue-cli）
• 也可能你选择了开源脚手架，克隆仓库
• 四处找轮子
• 安装各类依赖
• 新建页面，写逻辑
• 设计菜单
• 设计路由
• 新建页面的时候去复制旧的页面修改
• 把新的页面注册路由，注册菜单
• 作完了这个页面作下个，新建文件，复制代码，注册路由...

烦不烦？要优雅！

今天介绍阿里的开源产品：飞冰

飞冰是什么

"海量可复用物料，经过 GUI 工具极速构建中后台应用"。

这句 slogan 仍是很是准确的：

飞冰是一套综合解决方案，用来极速构建中后台应用（其实也能够作非中后台应用）。

能够作到极速是经过『海量可复用物料』和『GUI 开发工具』实现的。

使用飞冰的开发工做流是这样的：

下载 GUI 工具并安装 => 可视化的选择咱们提供的初始模板建立项目 => 可视化的建立页面并选择咱们提供的 100+ 高质量可复用区块 => 生成代码进行二次开发 => 开发完成以后点击打包编译出 HTML、JS、CSS 文件 => 部署使用

在整个流程中，你能够彻底经过 GUI 工具点击操做，无需安装配置 Node 环境等前端开发工具，也无需配置 webpack 等构建脚本，咱们已经按照淘宝前端最佳实践所有内置。此外，绝大部分的业务需求，咱们都已经开发出对应的物料，能够经过 GUI 进行可视化的拼装，尽量避免你去编写额外的业务逻辑。

物料源

下面是一张很长的图片，为了体积考虑这张图比较模糊，可是能够感觉一下 ICE 的区块数量：

原始网页连接 alibaba.github.io/ice/block

目前为止 ICE 已经支持 react vue Angular 三大主流框架的物料资源

打比方我如今项目须要富文本编辑器，能够看到区块里提供了三款编辑器可供选择

全部的这些，都是使用 GUI 就能够加入到项目中使用的，下面将会展现如何从安装 iceworks 客户端到在项目中新建页面。

如何使用

安装

为了真实演示，特地删掉了之前安装的 app

演示系统为 macOS，iceworks 支持 Windows 版本。

iceworks 下载地址 alibaba.github.io/ice/icework…

稍微等待了一下子，下载完成。安装后获得了这样一个 App：

上手

安装后打开看到一个很简单的界面：

切换到模板标签能够看到飞冰目前提供的脚手架列表：

区块标签能够看到区块列表

插件

设置

这就是表面上全部的功能，下面咱们来建一个项目体验一下

新建 vue 项目

飞冰是从 react 开始作的，如今 vue 和 Angular 物料源还比较少，咱们切换到 vue 选项卡里...

是否是混进了什么奇怪的东西！

没错，D2Admin 出了 ICE 版！

（此时你可能会想：我去，看了半天居然是一篇软文！其实不是的，在我作 D2 可是还没开源的时候，就有朋友推荐我 ICE 这个工具，当时感受就很不错。没想到以后受到了 ICE 开发团队的邀请，天然十分乐意开发了 ICE 版本，这真的是个不错的工具，请看下面的使用介绍。）

在我和阿里的开发者一个月的对接以后，D2Admin ICE 诞生了，做为飞冰平台上第一个非官方 vue 脚手架，D2Admin ICE 承担的但愿仍是很大的！下面使用这个脚手架作演示，展现如何不写代码建页面，不写代码出图表！

选择 D2Admin ICE 做为起始模板后会让咱们填写项目保存地址：

填写完成后开始下载模板，下载后会提示我是否要马上安装依赖：

为了不动态图过大我没有录安装过程：

在写上面的时候已经提示我依赖安装完成了（很人性化有没有）：

ennn...没毛病。

启动项目

点击 启动调试服务 会在本地打开调试服务，vue 项目默认执行的是 npm start：

打开显示的连接，能够看到项目已经稳稳地跑起来了：

D2Admin ICE 实质上是 d2-admin-start-kit 的特别版本，为适应 ICE 的逻辑修改了一部分代码，能够看到模板十分干净，没有了任何完整版的示例 demo：

关闭 ICE 内集成的终端后能够看到项目面板，能够显示出如今有哪些页面，安装了哪些依赖等：

新建页面

点击 新建页面 会打开新建页面界面：

随便选择一个区块新建一个页面（中间的等待时间是 iceworks 在从 npm 下载区块代码）

选择区块：

效果：

下面尝试一下选择多个区块：

自动生成了菜单：

页面效果：

检查一下自动生成的代码目录：

自动生成的页面组件：

自动生成的样式文件：

该有的都有了，不应有的也有了，连生命周期钩子都帮你写了一遍！

结语

演示一遍下来后，我生成了两个页面，没有写一行代码，剩下的操做就是修修改改，把多个页面都须要的组件提取一下，作作修改工做。

D2Admin 团队也会在之后的时间里尽力和 ICE 团队合做开发 vue 公用区块，加速 ICE 的 vue 生态建设，也但愿众多的 vuer 均可以参与进来，平台有了，社区繁荣起来才是对你们都有利的事情。

D2Admin ICE 将会保持和 D2Admin Start Kit 一致更新，若是你看到完整版的 D2Admin 实在喜欢，从完整版作减法也何尝不可 :）

D2 Projects

地址	描述
团队主页	D2Admin 所属的团队主页
中文文档	中文文档
D2Admin 完整版 预览地址	完整版 预览地址
D2Admin 完整版 github	完整版 Github 仓库
D2Admin 完整版 码云	完整版 码云镜像仓库
D2Admin 简化版 预览地址	简化版 预览地址
D2Admin 简化版 github	简化版 Github 仓库
D2Admin 简化版 码云	简化版 码云镜像仓库

开源项目组官方公众号

本文在项目文档中收录位置

在最后，若是你看完了，而且以为还不错，但愿能够到 项目主页 上点一个 star 做为你对这个项目的承认与支持，谢谢。