vue实现拖拽功能并生成h5页面 生成PC页面

最近接到了一个比较棘手的项目，实现拖拽生成h5或PC页面的功能，之前没有搞过类似的项目，所以顿时感到有点挑战性，不过还好，小编基础知识还比较扎实，在思考片刻后就开始入手了。

基础插件的准备

主要用到了vue的两个插件，draggable和VueDragResize

draggable：主要是实现组件的拖拽功能（用于拖拽页面）。

VueDragResize：主要实现组件的缩放以及在画布上拖拽移动的功能（用于热区）。

初始化项目之后进行组件的安装

安装draggable
npm install draggable --save

安装draggable
npm install VueDragResize --save

效果预览

在这里只给首页大家看了后期再将源码开源出来，这是配置页面。

生成的预览页面

配置完成后点击保存

上面是最终生成的效果，看看是不是比较神奇，网址希望大家收藏，后期我会将源码发布出来。