开源软件名称：

vdesjs-drag

开源软件地址：

https://gitee.com/china-bin/vdesjs

开源软件介绍：

中文 | English

vdesjs-drag

介绍

vdesjs-drag

技术选型

技术	描述
Vue.Draggable	基于 Sortable.js 的 Vue 拖放组件
vuex	状态管理工具(简单理解就是维护vue的公共变量，供全局使用)
clipboard.js	将文本复制到剪贴板的插件
element-ui	基于Vue.js 2.0 的桌面端UI框架
vant	有赞前端团队开源的移动端组件库 (我们选择部分vant组件，将其作为vdesjs-drag左侧拖拽组件)
handlebars	js模板引擎 (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.编写左侧组件json数据结构
2.编写组件，引入组件。
3.编写代码生成模板
如需详细步骤请参阅vdesjs官网

参考文档

官方文档： http://china-bin.gitee.io/vdesjs/预览地址： http://china-bin.gitee.io/vdesjs/demo/#/

持续升级

项目会持续维护升级，如您在使用中与到任何bug，或者关于本项目有任何好的建议都可以联系作者。

技术反馈交流群

qq群号: 1125390832

Build Setup

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report

已完成功能

清空画布
生成vue代码
h5端vant组件可拖拽
生成JSON代码
h5模式预览
完成扩展pc响应式布局组件
下载html文件至本地
制作vdesjs官网与演示demo
添加自由画布模式（自由画布模式可自由拖拽更改组件大小、布局、并且有标线对齐功能、历史记录、组合组件等功能）

加入计划功能 (欢迎补充提交建议)

使用场景描述

假如我想基于vant组件开发移动端h5页面，但是我又不想一个个的写代码，那么就可以使用vdesjs从左侧拖拽组件并编辑属性。点击生成vue代码。这个代码就可以复制到我们的项目中。（这个生成代码应该是非常便于开发的，理论上跟我们手写的代码相差无几，如果这个生成的代码有问题，都可以根据handlebars模板语法去自己手动修改组件所对应的代码模板）