基于 vue 的移动端页面可视化搭建工具思路

前言

首先我认可我标题党了。。。与其说是可视化搭建工具，不如说是可视化生成页面配置工具，即用拖拽的方式生成页面配置，再经过框架的动态组件的方式，基于配置，生成页面。

如今的公司，一个个都开始整本身的组件库，组件库搭建好之后，经过业务积累、聚合基础组件及抽象部分业务代码，又会产出复用性比较高的区块库，而可视化搭建，就是基于区块库来实现的。

先说个缺点，比较难应对逻辑复杂的场景以及多变的产品需求。。。

背景介绍

平常开发中发现公司不少小的项目长得都差很少，甚至有些页面就是把其余页面的各个模块换个数据，堆在一块儿就出了一个新页面，且在运营活动页中尤其常见，而这种大同小异的活动页，若是能让运营本身拖拖拽拽就搭出来，岂不美吱吱。

方案设计

首先想了一下，页面应该是这个结构的

整个逻辑应该是这样的

• 左边列表点一下，组件会出如今中间的位置
• 中间多个组件能够拖拽进行排序
• 可能有些组件须要嵌套，须要实现经过拖拽，能够把子组件塞到容器组件里的功能
• 从中间点击单个组件，能够在右侧展开该组件的配置项
• 右侧修改后，中间实时呈现效果

页面效果

简单页面撸完以下

左侧是基于一个配置文件，生成的组件列表。

中间是嵌套了一个 iframe，与外部经过 postMessage 通讯。（原本想画个 iphone6 长相的手机，结果画了半天仍是有点像 5s）

右侧是配置组件的位置，效果后面贴图。

拖拽部分使用 vuedraggable 实现，好用到爆炸。

再来个动态图

能够看到基本功能都已经实现了，右侧的配置位置能够处理 String、Number、Boolean、Array、Object 类型的数据

小结

项目还只是个半成品，主要是一个思路，其实配置生成后还能够作不少，好比

• 配置中的数据填充由后端实现
• 基于配置，可经过多个框架实现最终的页面，只须要根据约定设定组件名，并将数据经过 props 传递给组件便可，vue、react 甚至小程序，均可以基于配置生成页面。
• ...

你们有其余的想法能够一块儿讨论哈

丢个 Gayhub 地址，代码略丑，以为有点意思的话麻烦给个 star：

github.com/Lzzzzzq/vue…

参考文章

《有赞美业店铺装修前端解决方案》