如何通过拖拽操作构建Vue用户界面实现个性化布局？

本文共计1150个文字，预计阅读时间需要5分钟。

前言+前一段子公司拜访了一些小伙伴，大家都很热情，表示前端工作太久了，需要花费不少时间在前端开发上。本着不损失灵活性的原则，尽可能提高开发效率的原则，作者尝试在框架内集成了拖拽。

前言

前一阵子拜访了一些小伙伴，大家都表示苦前端太久了，需要花费不少时间在前端开发上。本着在不损失灵活性的前提下尽可能提高开发效率的原则，作者尝试在框架内集成了拖拽方式生成Vue用户界面的功能作为补充，以方便快速生成增删改查界面，也可以用于大屏展示及简单的网页制作。

一、技术原理

1.1 布局

  目前仅实现了基于vue-grid-layout的网格布局，设计画布上的每个组件动态加载至对应的GridItem内，同时根据组件配置绑定相应的prop及事件。