可视化搭建前端工程 - 阿里飞冰了解一下
阿里飞冰官方网站 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 作为你对这个项目的认可与支持,谢谢。
转载于:https://juejin.im/post/5b6349716fb9a04f834669d6
可视化搭建前端工程 - 阿里飞冰了解一下相关推荐
- 基于webpack搭建前端工程解决方案探索
关于前端工程 \\ 下面是百科关于"软件工程"的名词解释: \\ \ 软件工程是一门研究用工程化方法构建和维护有效的.实用的和高质量的软件的学科. \ \\ 其中,工程化是方法,是 ...
- 「可视化搭建系统」——从设计到架构,探索前端领域技术和业务价值
阿里巴巴集团前端委员会主席 圆心:未来前端的机会在哪里 对前端未来期许有四点:搭建服务, Serverless,智能化,IDE.仔细想想,一个「可视化搭建系统」的想象空间,正能完美命中这些方面.前端的 ...
- 个人网站搭建保姆级教程(2)- 前端工程umi脚手架搭建
前言 最近搞了个服务器,想着自己做个网站的脚手架,因为自己是纯前端新手,而且半路出家,中途踩了好多坑,准备写5篇给各位大佬们分享一下,如何从0搭建个人网站 服务器购买与环境搭建 前端工程umi脚手架搭 ...
- 阿里飞冰使用教程-前端低代码可视化GUI速开发
飞冰可以帮你干什么? 以往建立前端工程,需要许多繁琐的步骤,现在使用飞冰,他可以直接帮你搭出一个架子,你在这个架子的基础上再开发就行,并且使用飞冰,你的前端页面完全可以通过GUI可视化自己拼接而成,类 ...
- 可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境 安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...
- 【前端分享】可视化搭建的一些思考和实践(H5-Dooring原创作者)
由白玉兰开源开放研究院指导,联合掌门教育.声网.vue北京,举办的第二期前端技术分享活动,已于6.19号落幕,以下为大咖讲师们,现场演讲的整理稿,感谢大家的支持: 讲师介绍 分享嘉宾--徐小夕,开源社 ...
- 可视化搭建数据大屏系统的前端实现
随着公司业务的发展,经常会收到一些数据大屏的需求.目前我司有两种实现方案,一是人肉搭建,二是用阿里云 DataV 搭建. 人肉搭建,在本地脚手架开发环境中进行编码,有大量的重复劳动,能力复用性差,占用 ...
- H5新人福音~零配置搭建现代化的前端工程
X-BUILD一套基于Webpack(v4.21.0)快速搭建H5场景开发环境的脚手架,只需要几分钟的时间就可以运行起来.X-BUILD是针对H5开发的一套自动化构建工具,致力于提升开发效率,减小开发 ...
- 阿里飞冰官网 icework,一个集成框架,一键创建一个前端系统
阿里飞冰 icework,一个集成框架,一键创建一个前端系统 官方地址:https://alibaba.github.io/ice/
最新文章
- ssas 为绑定指定的大小太小,导致一个或多个列值被截断
- Chrome 技术篇-F12开发者工具清理缓存,高级、专业清浏览器缓存,storage和cache都指什么、区别
- Lua和C++交互详细总结
- [Asp.net core 3.1] 通过一个小组件熟悉Blazor服务端组件开发
- 【水】几个网络流图论模型的记录
- 刚安装Vs2008,安装时它弹出了一个一些常见问题的解决方案页,记录下
- 立根融资租赁:内部系统平台上云
- python3-pwntools教程_记一次five熬夜重装pwntools
- 【ElasticSearch】Es 源码之 NetworkModule 源码解读
- 软件性能测试——负载测试的最佳实践
- js/jquery禁止页面回退
- 好用的在线 java 编译网站,编辑器(亲测)
- C#使用iTextSharp+ZXing.Net+FreeSpire.PDF生成和打印pdf文档
- VS Code彻底卸载已安装插件
- 减轻使用者的从众心理压力 知名社群网站将隐藏赞数
- python如何读取dbf文件_python2.7读取dbf文件的正确姿势
- 浙江移动彩信新sp接入指南
- 带蓝色的紫罗兰色——三色配色篇
- 如何烧写Bubblegum-96 board
- ECMAScript 简介