32f05f8010
Former-commit-id: df462cbc74e5d5f9f2b6d2a14369bbe007b9d460 [formerly df462cbc74e5d5f9f2b6d2a14369bbe007b9d460 [formerly df462cbc74e5d5f9f2b6d2a14369bbe007b9d460 [formerly df462cbc74e5d5f9f2b6d2a14369bbe007b9d460 [formerly ec8d6757bcca804a0eaa832cce9493457667831b [formerly cf89836cde98f4b69e50e8863ec6d94a9697fb46]]]]] Former-commit-id: 9d49a5ec92447bf4e5c1c5d5e60262d2115a3c03 Former-commit-id: 4ce9106938fb3adad01d038a96aa6a322f1a2f6f Former-commit-id: 5b33f91fabead2d7b12c1e254914f1126e3f852c [formerly 3601b35ab8c1897ba5cdd9e32b4c64585622eb6b] Former-commit-id: 09e9cf395563628e43e1e997b33e3237a95448f3 Former-commit-id: 16df43728b52d9b9736c41ee14f3387c68148146 Former-commit-id: ce4871ce8d3542d8d73f1457f7c183e173f3b222 Former-commit-id: 2b402092ca41a56baba8edcf6d29afc4da46979f Former-commit-id: 9c4eb4f8504f26b40f40cb310cd4daf44e033993
8.4 KiB
D2Admin ICE 发布
可视化搭建前端工程 - 阿里飞冰了解一下
飞冰官方网站 https://alibaba.github.io/ice
每次新做一个项目，无论大小都要干这些事：
- 框架选型
- 初始化脚手架（比如使用 create-react-app 或者 vue-cli）
- 也可能你选择了开源脚手架，克隆仓库
- 四处找轮子
- 安装各种依赖
- 新建页面，写逻辑
- 设计菜单
- 设计路由
- 新建页面的时候去复制旧的页面修改
- 把新的页面注册路由，注册菜单
- 做完了这个页面做下个，新建文件，复制代码，注册路由...
烦不烦？要优雅！
今天介绍阿里的开源产品：飞冰
飞冰是什么
"海量可复用物料，通过 GUI 工具极速构建中后台应用"。
这句 slogan 还是非常准确的：
飞冰是一套综合解决方案，用来极速构建中后台应用（其实也可以做非中后台应用）。
可以做到极速是通过『海量可复用物料』和『GUI 开发工具』实现的。
使用飞冰的开发工作流是这样的：
下载 GUI 工具并安装 => 可视化的选择我们提供的初始模板创建项目 => 可视化的创建页面并选择我们提供的 100+ 高质量可复用区块 => 生成代码进行二次开发 => 开发完成之后点击打包编译出 HTML、JS、CSS 文件 => 部署使用
在整个流程中，你可以完全通过 GUI 工具点击操作，无需安装配置 Node 环境等前端开发工具，也无需配置 webpack 等构建脚本，我们已经按照淘宝前端最佳实践全部内置。此外，绝大部分的业务需求，我们都已经开发出对应的物料，可以通过 GUI 进行可视化的拼装，尽可能避免你去编写额外的业务逻辑。
物料源
下面是一张很长的图片，为了体积考虑这张图比较模糊，但是可以感受一下 ICE 的区块数量：
目前为止 ICE 已经支持 react vue Angular 三大主流框架的物料资源
打比方我现在项目需要富文本编辑器，可以看到区块里提供了三款编辑器可供选择
所有的这些，都是使用 GUI 就可以加入到项目中使用的，下面将会展示如何从安装 iceworks 客户端到在项目中新建页面。
如何使用
安装
为了真实演示，特意删掉了以前安装的 app
演示系统为 macOS，iceworks 支持 Windows 版本。
iceworks 下载地址 https://alibaba.github.io/ice/iceworks
稍微等待了一会儿，下载完成。安装后得到了这样一个 App：
上手
安装后打开看到一个很简单的界面：
切换到模板标签可以看到飞冰目前提供的脚手架列表：
区块标签可以看到区块列表
插件
设置
这就是表面上所有的功能，下面我们来建一个项目体验一下
新建 vue 项目
飞冰是从 react 开始做的，现在 vue 和 Angular 物料源还比较少，我们切换到 vue 选项卡里...
是不是混进了什么奇怪的东西！
没错，D2Admin 出了 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 作为你对这个项目的认可与支持，谢谢。