vue-design

用Vue和Electron开发最好的页面可视化构建程序

功能

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

✨ 下载

• Windows：
• Mac：

综述

本项目的初衷有二：

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

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

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

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

RoadMap

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

最后

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

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

Vue

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

React

• ：阿里官方项目，主要走的是物料复用的思路
• ：作者对编辑器的实现有比较深入的研究，可以去了解下