前言
在看过诸多低代码开发工具，及相关的博客文章后，有了一定的理论基础，想着尝试做一个属于自己的低代码开发工具，就有了EasyCode，目前属于个人独立开发，由于个人精力有限，会有不少问题，还请大家多多指正，当前完成了大部分功能在此分享一下，希望能和大家交流讨论共同进步。项目已上线utools，大家可以下载utools后搜索easycode并使用，要是想要配置自己需求的组件可以添加微信：xxt2286621910227,获取项目源码
简单介绍
目前实现了组件的基本操作如粘贴、复制、剪切、撤销、撤销回退、容器嵌套、删除等。为了提高事件与样式绑定的灵活性，以及为了后续代码生成的方便，参考了vue的写法，每个页面有自己独立的js函数与css样式，其中js函数也可以自定义方法，在调用时只需要this.自定义方法名即可，提供了编辑多页面功能，页面之间可以通过路由组件进行嵌套，通过this.$router.push({name:'页面名'})进行切换，支持导入导出页面，目前组件封装elementui的组件不过，尚未封装完全，后续将会封装更多组件。
功能简介
1.创建页面
在左侧工具栏点击页面，进行页面的创建，其中页面名用于后续代码生成时作为文件名使用，页面名在创建时需要保证是唯一的
2.拖拽组件
左侧工具栏点击组件，选择组件后拖拽到画布中，选中组件后点击的组件上会有蓝色的边框。锁定组件后则出现黄色边框，当拖拽组件时，鼠标在目标组件右侧时为橙色边框（拖拽的组件则插入目标组件后方），左侧时为绿色边框（拖拽的组件则插入目标组件前方）
3.事件绑定
编写事件，点击页面配置，在methods中编写方法，点击保存按钮 双击组件开启编辑页面，点击开关启动点击事件，在input框中填写方法名即可，点击预览便可以看其效果
效果如下：
4.样式绑定
编写样式，点击页面配置，在编辑器中编写样式，在右侧编辑器绑定class 中进行样式的绑定
效果如下：
5.数据绑定
绑定数据，点击页面配置，在data方法中编写绑定字段，在右侧属性配置中进行字段的绑定
效果如下：
6.路由组件
左侧工具栏点击组件，选择其他组件，将路由组件拖拽到画布中，在事件编辑中新建一个方法并调用this.router('页面名')即可进行嵌套组件的展示。后续将增加切换页面功能 效果如下：
7.快捷键
| 快捷键 | 介绍 |
|---|---|
| ctrl 左键 | 进行组件的多选操作 |
| ctrl d\backspace | 删除组件 |
| ctrl c | 复制组件 |
| ctrl v | 粘贴组件 |
| ctrl x | 剪切组件 |
| ctrl l | 组件锁定 |
| ctrl z | 撤销操作 |
| ctrl y | 撤销回退操作 |
| ctrl s | 保存，点击预览后会自动保存到localStorage |
| ctrl m | 开启边距编辑后拖拽组件则进行的是组件margin-left、margin-top的调整 |
| ctrl p | 开启位置编辑后拖拽组件则进行的时组件left、top的调整 |
| alt t | 向上选择组件 |
8.历史操作跳转
黄色背景的为当前的操作，点击操作历史则可以进行操作历史的跳转
9.导入导出功能
导出可以选择单个页面或者多个页面进行导出
导入可以选择跳过相同的文件名还是覆盖
结尾
第一次写博客，内容上可能有描述不清的地方，还请大家多多指正。截止到发布博客的时间，项目开发了应该有两个月时间了其中还有很多需要打磨的地方，希望和大家讨论交流，将easycode打磨完善，共同进步
实现原理介绍
基于vue3的低代码开发工具-事件与value的绑定 - 掘金 (juejin.cn)
基于vue3的低代码开发工具-样式绑定 - 掘金 (juejin.cn)
基于vue3的低代码平台-源码生成（Java freemarker) - 掘金 (juejin.cn)
