html 编辑器 拖动,可视化拖拽页面编辑器 一

前端技术日益发展，组件化日益成熟，作为一个前端，每天的工作就是用组件堆砌页面，有没有一种方式可以像CocosCreator，通过组件+脚本绑定的方式来实现我们的页面和功能，今天我们就来实现一个提高生产力的工具 可视化拖拽页面编辑器, 让产品和UI通过拖拽编辑页面，生产自己想要的页面。

技术框架采用Vue3 + Typescript + ElementPlus

每个章节下边都会贴出对应commit代码，方便大家对比学习

最终效果

实现功能：

主页面结构：左侧可选组件列表、中间容器画布、右侧编辑组件定义好的属性

从菜单拖拽组件到容器；

单选、多选；

容器内的组件可以拖拽移动位置；

组件拖拽调整宽高；

组件拖拽贴边，显示辅助线；

操作栏按钮与命令

撤销、重做；

导入、导出；

置顶、置底；

删除、清空；

组件绑定值；

根据组件标识，通过作用域插槽自定义某个组件的行为

一、项目搭建与页面布局

通过vue-cli生成项目

vue create visual-editor-vue

复制代码

选择手动配置

选择配置如下：

选择vue3.x版本

这一步选y，使用