vdesjs-drag是一个基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。

技术选型

Vue.Draggable 基于 Sortable.js 的 Vue 拖放组件

vuex 状态管理工具(简单理解就是维护vue的公共变量，供全局使用)

clipboard.js 将文本复制到剪贴板的插件

element-ui 基于Vue.js 2.0 的桌面端UI框架

vant 有赞前端团队开源的移动端组件库 (我们选择部分vant组件，将其作为vdesjs-drag左侧拖拽组件)

handlebarsjs 模板引擎 (vdesjs-drag左侧拖拽组件的代码生成模板选择handlebars作为模板引擎。如果想自己编写生成模板，可参照handlerbars语法进行编写)

vue-codemirror 代码编辑器(用其作为vdesjs-drag代码显示的编辑器)

file-save.js 将代码下载至本地

js-beautify 对生成的代码进行格式美化

项目目录结构

vdesjs
├── build
├── config
├── docs vuepress文档
│   ├── cooperation
│   └── guide
├── src
│   ├── assets 资源存放目录
│   │   ├── h5 h5模式
│   │   │   ├── basics 基础组件资源
│   │   │   ├── business 业务组件资源
│   │   │   ├── feeback 反馈组件资源
│   │   │   ├── form 表单组件资源
│   │   │   ├── nav 导航组件资源
│   │   │   └── show 展示组件资源
│   │   ├── icon
│   │   └── pc pc模式
│   │       └── basics
│   ├── common
│   │   ├── css 公共css
│   │   └── js 公共js
│   │       ├── h5
│   │       └── pc
│   ├── components 组件目录
│   │   ├── componentLib 左侧面板json数据存放
│   │   ├── h5 h5模式组件
│   │   │   ├── basics 左侧拖拽面板中的基础组件
│   │   │   ├── business 左侧拖拽面板中的业务组件
│   │   │   ├── feeback ...
│   │   │   ├── form ...
│   │   │   ├── nav ...
│   │   │   └── show ...
│   │   ├── pc pc模式组件
│   │   │   ├── basics
│   │   │   └── media
│   │   ├── pcomp 右侧属性栏独立组件
│   │   └── sub 实现vdesjs的子组件
│   ├── handlebars 模板代码存放目录
│   │   ├── helpers handlebars自定义helper
│   │   └── template
│   │       ├── h5 h5模式模板
│   │       └── pc pc模式模板
│   ├── mixins 混入
│   ├── page 路由页面
│   ├── preview 用于预览模式的组件
│   ├── router 路由配置
│   └── store vuex配置
└── static

已完成功能

1、清空画布

2、生成vue代码

3、h5端vant组件可拖拽

4、生成JSON代码

5、h5模式预览

6、完成扩展pc响应式布局组件

7、下载html文件至本地

8、制作vdesjs官网与演示demo

9、添加自由画布模式(自由画布模式可自由拖拽更改组件大小、布局、并且有标线对齐功能、历史记录、组合组件等功能)