vdesjs-drag可视化代码生成工具 v1.2
vdesjs-drag是一个基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。技术选型Vue.Draggable基于Sortable.js的Vue拖放组件vuex状态管理工具(简单理解就是维护vue的公共变量，供全局使用)clipboard.js将文本复制到剪贴板的插件element-ui基于Vue.js2.0的桌面端UI框架vant有赞
| 分类: 下载/工具 · JavaScript | 来源: 点击进入 | 版本: v1.2 |
| 日期: 2023-02-22 | 人气: | 大小: 9.46MB |
| 标签: javascript web应用开发 | ||
功能介绍
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 对生成的代码进行格式美化
项目目录结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 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、添加自由画布模式(自由画布模式可自由拖拽更改组件大小、布局、并且有标线对齐功能、历史记录、组合组件等功能)
版本声明
本文转载于：https://down.chinaz.com/soft/51370.htm 如有侵犯，请联系study_golang@163.com删除
更多
相关下载
查看更多
课程推荐
-
- Golang云原生架构师课程
- Go是一门并发支持、垃圾回收的编译型系统编程语言；本课程转载自哔哩哔哩：https://www.bilibili.com/video/BV1Mh411M7A
- 204次学习
-
- MySQL数据管理之备份恢复案例解析视频教程
- 《MySQL数据管理之备份恢复案例解析视频教程》MySQL是一个开放源码的小型关联式数据库管理系统，目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。
- 160次学习
-
- MySQL索引优化解决方案
- 本套课程是根据MySQL索引的设计理念与数据结构、索引使用场景、索引分类、索引运用场景、索引性能分析、查询优化、MySQL索引的慢查询等组成，主要讲述了MySQL索引优化的解决方案，非常适合有MySQL使用基础或者有一定工作经验的同学。课程讲解了解决大数量查询慢的问题、如何编写一个高效的SQL、查询语句应该如何优化、索引的实现原理是什么、索引又应该如何优化...等诸多SQL索引优化的难点和面试点。
- 182次学习
-
- 极客学院Docker视频教程
- Docker是PaaS提供商dotCloud开源的一个基于LXC的高级容器引擎，源代码托管在Github上,基于go语言并遵从Apache2.0协议开源。Docker自2013年以来非常火热，无论是从github上的代码活跃度，还是各大厂商的支持，都使Docker成为了时下最受关注的技术，甚至微软都声称在下一代WindowsServer中集成对Docker的支持。所以我们收集了《极客学院Docke
- 243次学习
-
- Golang进阶实战编程
- 本课程是在《Go语言基础视频》基础之上录制的，是Go语言基础的后半部分。包括包的管理，IO操作，Go语言最大的亮点：高并发，goroutine，channel，反射等。本视频主要为了帮助Go语言的初学者，从零到一的快速入门。学完本套课程，可以学会如果通过包管理Go项目，并发模型，以及并发实现，channel通道如何传递数据，反射等等。
- 127次学习
-
- JavaScript极速入门
- 本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了，让你学习0压力，适合新手观看学习......
- 431次学习
查看更多
相关文章
-
- Golangmap实践及实现原理解析
- 2022-12-28 505浏览
-
- GoLand调式动态执行代码
- 2023-01-13 502浏览
-
- 试了下Golang实现try catch的方法
- 2022-12-27 502浏览
-
- 用Nginx反向代理部署go写的网站。
- 2023-01-17 502浏览
-
- MySQL主从切换的超详细步骤
- 2023-01-01 501浏览
-
- Mysql-普通索引的 change buffer
- 2023-01-25 501浏览
