vue-design 桌面端页面可视化构建程序
发布于 5 个月前 作者 L-Chris 2202 次浏览 来自 分享

vue-design

用Vue和Electron开发最好的页面可视化构建程序 Your star is the greatest encouragement to me.

功能

  • 使用electron构建的桌面端应用
  • 通过简单的配置引入UI组件库
  • 通过可拖拽、可编辑的组件设计页面
  • 可编辑页面css
  • 保存为.vue文件
  • 保存/导入一个项目

layout.png code.png

✨ 下载

综述

本项目的初衷有二:

  • 是减少中后台应用的开发成本
  • 通过类axure的功能,让设计师的设计稿生成初步的.vue文件代码,打通设计师和前端间的隔阂

对于第一点,相信不少大公司有很多实践。例如阿里开源的ice工具走得是代码块复用的思路,非常值得借鉴。

而对于第二点,目前开源的也有不少项目,但都是基于web的。在我看来,可视化构建需要和文件进行强交互,所以我选择了vue和electron去开发一个桌面端应用。

目前,这个项目还是雏形,但已具备基本的功能,在代码实现上在目前vue的几个项目中是最简洁的(这也多得前人的经验)。这个项目我会长期跟进,有兴趣的求关注下:)

RoadMap

  • 更多内置布局、区块和元件 (2018/03-2018/04)
  • 检测.vue文件改动并自动同步到项目中 (2018/04)
  • 物料市场 (2018/04)
  • 自定义插件和插件市场 (2018/05)

最后

本人会在4月份求职,广州地区,有好坑的话,求介绍:)

QQ:563303226 Github:L-Chris

若对vue/react对页面可视化构建有兴趣的,可以参考以下开源项目:

Vue

  • vue-design:本项目地址,求star:)
  • vuep:实时编辑组件代码并预览
  • Vue-Layout:拖拽,修改,预览代码等基本功能,思想比较好理解,可以当入门了解下
  • esview:除基本功能外,结合了后端进行组件上传/下载功能,代码质量相对高点

React

  • ice:阿里官方项目,主要走的是物料复用的思路
  • gaea-editor:作者对编辑器的实现有比较深入的研究,可以去了解下
4 回复

@L-Chris 可以给我发一份简历,广州阿里游戏。

@L-Chris 有兴趣的来深圳的话 可联系

回到顶部