内容简介：首先我承认我标题党了。。。与其说是可视化搭建工具，不如说是可视化生成页面配置工具，即用拖拽的方式生成页面配置，再通过框架的动态组件的方式，基于配置，生成页面。现在的公司，一个个都开始整自己的组件库，组件库搭建好以后，通过业务积累、聚合基础组件及抽象部分业务代码，又会产出复用性比较高的区块库，而可视化搭建，就是基于区块库来实现的。先说个缺点，比较难应对逻辑复杂的场景以及多变的产品需求。。。
首先我承认我标题党了。。。与其说是可视化搭建工具，不如说是可视化生成页面配置工具，即用拖拽的方式生成页面配置，再通过框架的动态组件的方式，基于配置，生成页面。
现在的公司，一个个都开始整自己的组件库，组件库搭建好以后，通过业务积累、聚合基础组件及抽象部分业务代码，又会产出复用性比较高的区块库，而可视化搭建，就是基于区块库来实现的。
先说个缺点，比较难应对逻辑复杂的场景以及多变的产品需求。。。
背景介绍
日常开发中发现公司很多小的项目长得都差不多，甚至有些页面就是把其他页面的各个模块换个数据，堆在一起就出了一个新页面，且在运营活动页中尤为常见，而这种大同小异的活动页，如果能让运营自己拖拖拽拽就搭出来，岂不美吱吱。
方案设计
首先想了一下，页面应该是这个结构的
整个逻辑应该是这样的
- 左边列表点一下，组件会出现在中间的位置
- 中间多个组件可以拖拽进行排序
- 可能有些组件需要嵌套，需要实现通过拖拽，可以把子组件塞到容器组件里的功能
- 从中间点击单个组件，可以在右侧展开该组件的配置项
- 右侧修改后，中间实时呈现效果
页面效果
简单页面撸完如下
左侧是基于一个配置文件，生成的组件列表。
中间是嵌套了一个 iframe，与外部通过 postMessage 通信。（本来想画个 iphone6 长相的手机，结果画了半天还是有点像 5s）
右侧是配置组件的位置，效果后面贴图。
拖拽部分使用 vuedraggable 实现，好用到爆炸。
再来个动态图
可以看到基本功能都已经实现了，右侧的配置位置可以处理 String、Number、Boolean、Array、Object 类型的数据
以上所述就是小编给大家介绍的《基于 vue 的移动端页面可视化搭建工具思路》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- Jmeter + Grafana搭建实时监控可视化
- 前端工程实践之可视化搭建系统（一）
- 使用 QuickBI 搭建酷炫可视化分析
- RocketMQ 可视化环境搭建和基础代码使用
- Arduino MQTT 搭建物联网可视化温度实时监测
- 可视化搭建平台的地图组件和日历组件方案选型
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
数据结构（C语言版）
严蔚敏、吴伟民 / 清华大学出版社 / 2012-5 / 29.00元
《数据结构》（C语言版）是为“数据结构”课程编写的教材，也可作为学习数据结构及其算法的C程序设计的参数教材。 本书的前半部分从抽象数据类型的角度讨论各种基本类型的数据结构及其应用；后半部分主要讨论查找和排序的各种实现方法及其综合分析比较。其内容和章节编排1992年4月出版的《数据结构》（第二版）基本一致，但在本书中更突出了抽象数据类型的概念。全书采用类C语言作为数据结构和算法的描述语言。 ......一起来看看 《数据结构（C语言版）》 这本书的介绍吧!
