java和vue实现拖拽可视化_可视化拖拽页面编辑器 一__Vue.js

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

theme: juejin

highlight:

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

技术框架采用Vue3 + Typescript + ElementPlus

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

最终效果

实现功能：

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

从菜单拖拽组件到容器；

单选、多选；

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

组件拖拽调整宽高；

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

操作栏按钮与命令

撤销、重做；

导入、导出；

置顶、置底；

删除、清空；

组件绑定值；

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

预览地址

一、项目搭建与页面布局

通过vue-cli生成项目

vue create visual-editor-vue选择手动配置

选择配置如下：

选择vue