diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 5ad8e324..467bf6a3 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -123,6 +123,7 @@ function sideBarArticle (titleCookBook, titleUpdate) { title: titleUpdate, collapsable: false, children: [ + 'update/ice-1.1.2', 'update/1.1.5', 'update/1.1.4', 'update/0.0.0' diff --git a/docs/zh/article/update/ice-1.1.2.md b/docs/zh/article/update/ice-1.1.2.md new file mode 100644 index 00000000..03427e20 --- /dev/null +++ b/docs/zh/article/update/ice-1.1.2.md @@ -0,0 +1,226 @@ +# D2Admin ICE 发布 + +# 可视化搭建前端工程 - 阿里飞冰了解一下 + +飞冰官方网站 [https://alibaba.github.io/ice](https://alibaba.github.io/ice) + +每次新做一个项目,无论大小都要干这些事: + +* 框架选型 +* 初始化脚手架(比如使用 **create-react-app** 或者 **vue-cli**) +* 也可能你选择了开源脚手架,克隆仓库 +* 四处找轮子 +* 安装各种依赖 +* 新建页面,写逻辑 +* 设计菜单 +* 设计路由 +* 新建页面的时候去复制旧的页面修改 +* 把新的页面注册路由,注册菜单 +* 做完了这个页面做下个,新建文件,复制代码,注册路由... + +**烦不烦?要优雅!** + +今天介绍阿里的开源产品:[飞冰](https://alibaba.github.io/ice) + +## 飞冰是什么 + +![](http://fairyever.qiniudn.com/20180803020053.png) + +"海量可复用物料,通过 GUI 工具极速构建中后台应用"。 + +这句 slogan 还是非常准确的: + +飞冰是一套综合解决方案,用来极速构建中后台应用(其实也可以做非中后台应用)。 + +可以做到极速是通过『海量可复用物料』和『GUI 开发工具』实现的。 + +使用飞冰的开发工作流是这样的: + +`下载 GUI 工具并安装` => `可视化的选择我们提供的初始模板创建项目` => `可视化的创建页面并选择我们提供的 100+ 高质量可复用区块` => `生成代码进行二次开发` => `开发完成之后点击打包编译出 HTML、JS、CSS 文件` => `部署使用` + +在整个流程中,你可以完全通过 GUI 工具点击操作,无需安装配置 Node 环境等前端开发工具,也无需配置 webpack 等构建脚本,我们已经按照淘宝前端最佳实践全部内置。此外,绝大部分的业务需求,我们都已经开发出对应的物料,可以通过 GUI 进行可视化的拼装,尽可能避免你去编写额外的业务逻辑。 + +### 物料源 + +下面是一张很长的图片,为了体积考虑这张图比较模糊,但是可以感受一下 ICE 的区块数量: + +> 原始网页链接 [https://alibaba.github.io/ice/block](https://alibaba.github.io/ice/block) + +![](http://fairyever.qiniudn.com/20180803005118.jpg) + +目前为止 ICE 已经支持 react vue Angular 三大主流框架的物料资源 + +![](http://fairyever.qiniudn.com/20180803005219.png) + +打比方我现在项目需要富文本编辑器,可以看到区块里提供了三款编辑器可供选择 + +![](http://fairyever.qiniudn.com/20180803005411.png) + +所有的这些,都是使用 GUI 就可以加入到项目中使用的,下面将会展示如何从安装 iceworks 客户端到在项目中新建页面。 + +## 如何使用 + +### 安装 + +> 为了真实演示,特意删掉了以前安装的 app + +演示系统为 macOS,iceworks 支持 Windows 版本。 + +iceworks 下载地址 [https://alibaba.github.io/ice/iceworks](https://alibaba.github.io/ice/iceworks) + +![](http://fairyever.qiniudn.com/20180803005813.png) + +稍微等待了一会儿,下载完成。安装后得到了这样一个 App: + +![](http://fairyever.qiniudn.com/20180803010417.png) + +### 上手 + +安装后打开看到一个很简单的界面: + +![](http://fairyever.qiniudn.com/20180803010628.png) + +切换到模板标签可以看到飞冰目前提供的脚手架列表: + +![](http://fairyever.qiniudn.com/20180803010704.png) + +区块标签可以看到区块列表 + +![](http://fairyever.qiniudn.com/20180803011044.gif) + +插件 + +![](http://fairyever.qiniudn.com/20180803011128.png) + +设置 + +![](http://fairyever.qiniudn.com/20180803011150.png) + +这就是表面上所有的功能,下面我们来建一个项目体验一下 + +### 新建 vue 项目 + +飞冰是从 react 开始做的,现在 vue 和 Angular 物料源还比较少,我们切换到 vue 选项卡里... + +![](http://fairyever.qiniudn.com/20180803011329.png) + +**是不是混进了什么奇怪的东西!** + +![](http://fairyever.qiniudn.com/20180803011519.png) + +没错,D2Admin 出了 ICE 版! + +在我和阿里的开发者**一个月**的对接之后,D2Admin ICE 诞生了,作为飞冰平台上第一个**非官方 vue 脚手架**,D2Admin ICE 承担的希望还是很大的!下面使用这个脚手架做演示,展示如何**不写代码**建页面,**不写代码**出图表! + +选择 D2Admin ICE 作为起始模板后会让我们填写项目保存地址: + +![](http://fairyever.qiniudn.com/20180803011843.png) + +填写完成后开始下载模板,下载后会提示我是否要立刻安装依赖: + +![](http://fairyever.qiniudn.com/20180803012018.gif) + +为了避免动态图过大我没有录安装过程: + +![](http://fairyever.qiniudn.com/20180803012215.png) + +在写上面的时候已经提示我依赖安装完成了(很人性化有没有): + +![](http://fairyever.qiniudn.com/20180803012311.png) + +![](http://fairyever.qiniudn.com/20180803012346.png) + +ennn...没毛病。 + +### 启动项目 + +点击 `启动调试服务` 会在本地打开调试服务,vue 项目默认执行的是 `npm start`: + +![](http://fairyever.qiniudn.com/20180803012548.gif) + +打开显示的链接,可以看到项目已经稳稳地跑起来了: + +![](http://fairyever.qiniudn.com/20180803012748.png) + +D2Admin ICE 实质上是 [d2-admin-start-kit](https://github.com/d2-projects/d2-admin-start-kit) 的特别版本,为适应 ICE 的逻辑修改了一部分代码,可以看到模板十分干净,没有了任何完整版的示例 demo: + +![](http://fairyever.qiniudn.com/20180803012914.png) + +关闭 ICE 内集成的终端后可以看到项目面板,可以显示出现在有哪些页面,安装了哪些依赖等: + +![](http://fairyever.qiniudn.com/20180803013159.png) + +### 新建页面 + +点击 `新建页面` 会打开新建页面界面: + +![](http://fairyever.qiniudn.com/20180803013712.png) + +随便选择一个区块新建一个页面(中间的等待时间是 iceworks 在从 npm 下载区块代码) + +![](http://fairyever.qiniudn.com/20180803013831.gif) + +选择区块: + +![](http://fairyever.qiniudn.com/20180803014037.png) + +效果: + +![](http://fairyever.qiniudn.com/20180803014058.png) + +下面尝试一下选择多个区块: + +![](http://fairyever.qiniudn.com/20180803014157.png) + +![](http://fairyever.qiniudn.com/20180803014244.png) + +自动生成了菜单: + +![](http://fairyever.qiniudn.com/20180803014402.png) + +页面效果: + +![](http://fairyever.qiniudn.com/20180803014605.gif) + +检查一下自动生成的代码目录: + +![](http://fairyever.qiniudn.com/20180803014743.png) + +自动生成的页面组件: + +![](http://fairyever.qiniudn.com/20180803015016.png) + +自动生成的样式文件: + +![](http://fairyever.qiniudn.com/20180803015047.png) + +该有的都有了,不该有的也有了,连生命周期钩子都帮你写了一遍! + +## 结语 + +演示一遍下来后,我生成了两个页面,没有写一行代码,剩下的操作就是修修改改,把多个页面都需要的组件提取一下,做做修改工作。 + +D2Admin 团队也会在以后的时间里尽力和 ICE 团队合作开发 vue 公用区块,加速 ICE 的 vue 生态建设,也希望众多的 vuer 都可以参与进来,平台有了,社区繁荣起来才是对大家都有利的事情。 + +D2Admin ICE 将会保持和 D2Admin Start Kit 一致更新,如果你看到完整版的 D2Admin 实在喜欢,从完整版做减法也未尝不可 :) + +## D2 Projects + +| 地址 | 描述 | +| --- | --- | +| [团队主页](https://github.com/d2-projects) | D2Admin 所属的团队主页 | +| [中文文档](http://d2admin.fairyever.com/zh/) | 中文文档 | +| [D2Admin 完整版 预览地址](https://fairyever.gitee.io/d2-admin-preview/#/index) | 完整版 预览地址 | +| [D2Admin 完整版 github](https://github.com/d2-projects/d2-admin) | 完整版 Github 仓库 | +| [D2Admin 完整版 码云](https://gitee.com/fairyever/d2-admin) | 完整版 码云镜像仓库 | +| [D2Admin 简化版 预览地址](https://fairyever.gitee.io/d2-admin-start-kit-preview/#/index) | 简化版 预览地址 | +| [D2Admin 简化版 github](https://github.com/d2-projects/d2-admin-start-kit) | 简化版 Github 仓库 | +| [D2Admin 简化版 码云](https://gitee.com/fairyever/d2-admin-start-kit) | 简化版 码云镜像仓库 | + +开源项目组官方公众号 + + + +[本文在项目文档中收录位置](http://d2admin.fairyever.com/zh/article/update/ice-1.1.2.html) + +在最后,如果你看完了,并且觉得还不错,希望可以到 [项目主页](https://github.com/d2-projects/d2-admin) 上点一个 **star** 作为你对这个项目的认可与支持,谢谢。 \ No newline at end of file