内容简介：首先我承认我标题党了。。。与其说是可视化搭建工具，不如说是可视化生成页面配置工具，即用拖拽的方式生成页面配置，再通过框架的动态组件的方式，基于配置，生成页面。现在的公司，一个个都开始整自己的组件库，组件库搭建好以后，通过业务积累、聚合基础组件及抽象部分业务代码，又会产出复用性比较高的区块库，而可视化搭建，就是基于区块库来实现的。先说个缺点，比较难应对逻辑复杂的场景以及多变的产品需求。。。
首先我承认我标题党了。。。与其说是可视化搭建工具，不如说是可视化生成页面配置工具，即用拖拽的方式生成页面配置，再通过框架的动态组件的方式，基于配置，生成页面。
现在的公司，一个个都开始整自己的组件库，组件库搭建好以后，通过业务积累、聚合基础组件及抽象部分业务代码，又会产出复用性比较高的区块库，而可视化搭建，就是基于区块库来实现的。
先说个缺点，比较难应对逻辑复杂的场景以及多变的产品需求。。。
背景介绍
日常开发中发现公司很多小的项目长得都差不多，甚至有些页面就是把其他页面的各个模块换个数据，堆在一起就出了一个新页面，且在运营活动页中尤为常见，而这种大同小异的活动页，如果能让运营自己拖拖拽拽就搭出来，岂不美吱吱。
方案设计
首先想了一下，页面应该是这个结构的
整个逻辑应该是这样的
- 左边列表点一下，组件会出现在中间的位置
- 中间多个组件可以拖拽进行排序
- 可能有些组件需要嵌套，需要实现通过拖拽，可以把子组件塞到容器组件里的功能
- 从中间点击单个组件，可以在右侧展开该组件的配置项
- 右侧修改后，中间实时呈现效果
页面效果
简单页面撸完如下
左侧是基于一个配置文件，生成的组件列表。
中间是嵌套了一个 iframe，与外部通过 postMessage 通信。（本来想画个 iphone6 长相的手机，结果画了半天还是有点像 5s）
右侧是配置组件的位置，效果后面贴图。
拖拽部分使用 vuedraggable 实现，好用到爆炸。
再来个动态图
可以看到基本功能都已经实现了，右侧的配置位置可以处理 String、Number、Boolean、Array、Object 类型的数据
以上所述就是小编给大家介绍的《基于 vue 的移动端页面可视化搭建工具思路》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- Jmeter + Grafana搭建实时监控可视化
- 前端工程实践之可视化搭建系统（一）
- 使用 QuickBI 搭建酷炫可视化分析
- RocketMQ 可视化环境搭建和基础代码使用
- Arduino MQTT 搭建物联网可视化温度实时监测
- 可视化搭建平台的地图组件和日历组件方案选型
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Web Caching
Duane Wessels / O'Reilly Media, Inc. / 2001-6 / 39.95美元
On the World Wide Web, speed and efficiency are vital. Users have little patience for slow web pages, while network administrators want to make the most of their available bandwidth. A properly design......一起来看看 《Web Caching》 这本书的介绍吧!
