vdesjs-drag是一個(gè)基于vue的可視化拖拽，代碼生成工具。提升前端開發(fā)效率，或者集成至項(xiàng)目作為在線拖拽工具。

技術(shù)選型

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

vuex 狀態(tài)管理工具(簡(jiǎn)單理解就是維護(hù)vue的公共變量，供全局使用)

clipboard.js 將文本復(fù)制到剪貼板的插件

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

vant 有贊前端團(tuán)隊(duì)開源的移動(dòng)端組件庫 (我們選擇部分vant組件，將其作為vdesjs-drag左側(cè)拖拽組件)

handlebarsjs 模板引擎 (vdesjs-drag左側(cè)拖拽組件的代碼生成模板選擇handlebars作為模板引擎。如果想自己編寫生成模板，可參照handlerbars語法進(jìn)行編寫)

vue-codemirror 代碼編輯器(用其作為vdesjs-drag代碼顯示的編輯器)

file-save.js 將代碼下載至本地

js-beautify 對(duì)生成的代碼進(jìn)行格式美化

項(xiàng)目目錄結(jié)構(gòu)

 vdesjs
├── build
├── config
├── docs vuepress文檔
│ ├── cooperation
│ └── guide
├── src
│ ├── assets 資源存放目錄
│ │ ├── h5 h5模式
│ │ │ ├── basics 基礎(chǔ)組件資源
│ │ │ ├── business 業(yè)務(wù)組件資源
│ │ │ ├── feeback 反饋組件資源
│ │ │ ├── form 表單組件資源
│ │ │ ├── nav 導(dǎo)航組件資源
│ │ │ └── show 展示組件資源
│ │ ├── icon
│ │ └── pc pc模式
│ │ └── basics
│ ├── common
│ │ ├── css 公共css
│ │ └── js 公共js
│ │ ├── h5
│ │ └── pc
│ ├── components 組件目錄
│ │ ├── componentLib 左側(cè)面板json數(shù)據(jù)存放
│ │ ├── h5 h5模式組件
│ │ │ ├── basics 左側(cè)拖拽面板中的基礎(chǔ)組件
│ │ │ ├── business 左側(cè)拖拽面板中的業(yè)務(wù)組件
│ │ │ ├── feeback ...
│ │ │ ├── form ...
│ │ │ ├── nav ...
│ │ │ └── show ...
│ │ ├── pc pc模式組件
│ │ │ ├── basics
│ │ │ └── media
│ │ ├── pcomp 右側(cè)屬性欄獨(dú)立組件
│ │ └── sub 實(shí)現(xiàn)vdesjs的子組件
│ ├── handlebars 模板代碼存放目錄
│ │ ├── helpers handlebars自定義helper
│ │ └── template
│ │ ├── h5 h5模式模板
│ │ └── pc pc模式模板
│ ├── mixins 混入
│ ├── page 路由頁面
│ ├── preview 用于預(yù)覽模式的組件
│ ├── router 路由配置
│ └── store vuex配置
└── static

 已完成功能

1、清空畫布

2、生成vue代碼

3、h5端vant組件可拖拽

4、生成JSON代碼

5、h5模式預(yù)覽

6、完成擴(kuò)展pc響應(yīng)式布局組件

7、下載html文件至本地

8、制作vdesjs官網(wǎng)與演示demo

9、添加自由畫布模式(自由畫布模式可自由拖拽更改組件大小、布局、并且有標(biāo)線對(duì)齊功能、歷史記錄、組合組件等功能)