vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...

最新推荐文章于 2024-08-20 09:18:52 发布

weixin_39622399

最新推荐文章于 2024-08-20 09:18:52 发布

阅读量1.9k

点赞数

文章标签： vue可视化拖拽生成工具

本文链接：https://blog.csdn.net/weixin_39622399/article/details/111735146

版权

vdesjs是一款基于Vue的可视化拖拽代码生成工具，利用Sortable.js实现拖放，结合Vuex进行状态管理。它支持扩展自定义组件和模板，通过拖拽构建界面并生成Vue代码，提升开发效率。项目持续迭代升级，包括丰富的组件库和模板，提供详细的文档和社区支持。

摘要由CSDN通过智能技术生成

vdesjs

介绍

vdesjs是一款基于vue技术栈，可视化拖拽，代码生成工具。我们提供详细的文档来帮助您理解我们工具的实现原理，并且您可以方便的基于vdesjs来扩展您自己的代码生成组件。

技术选型

技术

描述

基于 Sortable.js 的 Vue 拖放组件

vuex

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

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

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

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

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

代码编辑器(用其作为vdesjs代码显示的编辑器)

项目目录结构

vdesjs

├── build

├── config

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39622399

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue可视化拖拽生成工具_vue实现可视化可拖放的自定义表单

weixin_39851457的博客

12-20

2949

实现如例子所示的可视化可拖放表单功能。整个页面，分为左中右三栏布局，左栏的部件库的部件(组件)作为key,拖放到中间区域时，往vuex存放数组数据，拖一个就push一个。点击某个组件时，在右栏显示其属性，其实也就是在vuex存放的数据中查找数据迭代属性。左中右三栏左右固定中间自适应布局首先，布局上来看，左右都是可以拉伸的，中间是自适应的布局。左右分别float left和float right...

vue可视化拖拽生成工具_vuegg：一个通过可视化拖拽组件的方式来生成VUE GUI原型界面...

weixin_34528410的博客

01-12

3471

vueggvue.js GUI generator[ Mockups and code in one go! ] About vueggScaffold vuejs projects by dragging-dropping components directly into the visual editor and moving-resizing them to your choice...

参与评论您还未登录，请先登录后发表或查看评论

vue-code-generate:代码生成工具

05-26

工具使用场景 vue + element-ui + 不想写重复的组件代码结合vscode插件 TODO Highlight使用效果更加，会高亮需要插入业务代码的区域使用方法 cd ${项目目录} 选择生成方式代码片段文件地址输入要生成的文件地址：${相对路径|绝对路径} 选择组件组织: ${el|公司组件内部沉淀的组件前缀} 选择组件类型: compTypes的某一个 compTypes dialog table form tabs

Vue Draggable 组件 (v-drag) 使用教程

热门推荐

weixin_43765747的博客

02-18

2万+

日常开发时想要快速构建节省时间或者功能需求需要拖拽生成表单，推荐使用以下表单设计器。 1.基于vue+elementui 的表单设计及代码生成器 Form Generator 码云仓库：form-generator: Element UI表单设计及代码生成器演示地址：form-generator ...

vue 可视化页面拖拽布局_数据可视化，R语言高级绘图——lattice的页面布局

weixin_39632728的博客

12-08

934

在前面小编带领大家学会了如何使用par()函数把多个图放在一个页面上。lattice函数不能辨别par()函数设置，所以我们需要学习其他的方法使图形绘制在一个单独的图中。最简单的方法是把lattice图形保存成对象并使用带有split=或position=选项的plot()函数来保存成单个图片。下面我们来看看split选项。split选项将一个页面分成指定数量的行和列，并把图放到结果矩阵的特定单元...

拖拽式Vue组件代码生成平台(LCG)新版详细介绍

SAHADEV的专栏

01-07

6399

拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具，英文全称：Low Code Generator，简称LCG。它也是一种LowCode解决方案。通过它可以快速完成Vue组件的代码骨架搭建，通过减少不必要的重复工作从而带来开发效率的提升。体验地址：https://lc.100tal.com/ 出现的背景做前端久了就难免会发现有一些工作其实是繁复的，它们有一些共同的特点：频率高非常基础花费时间而有一部分工作是可以通过技术手段解决的，例如在写Vue时会发现： class的名称需

vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort

weixin_39680678的博客

12-02

1379

今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort。vue-slicksort一款功能强大的可拖拽的vue.js组件。拥有丝滑般拖拽动画效果，支持水平/垂直/网格拖拽排序。还可以自动滚动、锁定坐标系，并支持触摸。代码片段"true" :pressDelay="300" v-model="appitems" helperClass="helperClass"cla...

基于vue可视化拖拽编辑，页面生成工具提升前端开发效率，可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面

06-03

"基于Vue可视化拖拽编辑，页面生成工具"是一种利用Vue.js技术构建的工具，它旨在提升前端开发效率，允许开发者通过直观的拖放操作在界面上创建和编辑页面布局，然后将这些布局转换为JSON数据。这个过程不仅简化了UI...

vue可视化拖拽生成工具_GitHub - dearsurf/vdesjs: 基于vue的可视化拖拽，代码生成工具。...

weixin_36212334的博客

01-12

1375

vdesjs 介绍 ???? ????vdesjs是一款基于vue技术栈，可视化拖拽，代码生成工具。我们提供详细的文档来帮助您理解我们工具的实现原理，并且您可以方便的基于vdesjs来扩展您自己的代码生成组件。技术选型 ???? ????技术描述基于 Sortable.js 的 Vue 拖放组件vuex状态管理工具(简单理解就是维护vue的公共变量，供全局使用)将文本复制到剪贴板的插件基于Vue.js 2.0 的桌...

VueLayout基于UI组件的Vue可视化布局生成vue代码的工具

08-12

Vue-Layout 基于UI组件的Vue可视化布局、生成.vue代码的工具

Dreamweaver（拖拽图形设计自动生成代码）

05-04

Dreamweaver（拖拽图形设计自动生成代码），中文名称 "梦想编织者"，最初为美国MACROMEDIA公司开发，2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设

vue可视化拖拽生成工具_GitHub - kerasking/vdesjs: 基于vue的可视化拖拽，代码生成工具。...

weixin_29691667的博客

12-30

1918

推荐这几个数据大屏可视化开发工具

u013655559的博客

09-23

5424

❝前沿：最近有需求开始接触数据可视化的开发，前期调研和体验了国内几家比较大的数据可视化解决方案提供商，并对开发中会涉及到一些工具做了筛选，经常在社区看到有小伙伴反馈相关方面的需求，于是借...

java和vue实现拖拽可视化_基于Vue实现拖拽效果

weixin_28932441的博客

03-02

635

效果图demo1.gif分清clientY pageY screenY layerY offsetY的区别在我们想要做出拖拽这个效果的时候，我们需要分清这几个属性的区别，这几个属性都是计算鼠标点击的偏移值，我们需要对其进行了解才可以继续实现我们的拖拽效果clientY 指的是距离可视页面左上角的距离pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)screenY 指的是距离屏幕左上角的...

Vue 父组件与子组件之间的通信

weixin_41359273的博客

11-03

433

1.我们知道组件其实是相当于一个vue实例，它有自己的data,method，template，components等等的数据，所以它想要拿到别人的数据是要通过一定的方式的，而不是随便就可以拿到别的组件的数据 2.官网查得 1）父组件通过props可向子组件传递数据 2）子组件通过事件向父组件传递数据 3.父传子props的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue 实现元素可拖曳

MunjungNa的博客

11-16

1751

转载的，蛮好用的，多谢原博主Vue移动端实现元素拖拽 - Tove丶 - 博客园最近遇到一个需求，在App内嵌的H5页面上，有一个悬浮的客服图标，点击可跳转客服页面。最初这个客服图标采用的是固定定位的方式。现在新的需求是，可以拖拽该图标到屏幕任意位置，防止遮挡页面内容。思考实现https://www.cnblogs.com/chen214/p/15078391.html 方法封装 /** * @name: draggable * @description: 元素拖拽 */ co.

vue可视化拖拽生成工具_一款可拖拽的WEB表单设计布局器-(echarts-vue-jquery-可视化图表)...

weixin_39794347的博客

12-20

7305

背景现在越来越多的业务要求运营可以自由定制化页面，此过程最大的好处就是前端研发不用介入就能完成页面的定制化，大大提升了产品的灵活性，减轻前端工程师的工作量还有一些场景：用户可以自由定制图表工具，通过配置数据源，x y轴即可达到图表定制化的目的软件今天给大家推荐一款前端可视化的布局器一睹软件外观在线地址magicalcoder.com用电脑访问外观此布局器的最大特点如下1 支持多种ui(vue j...

vue可视化拖拽生成工具

05-19

Vue 可视化拖拽生成工具，可以让用户通过简单的拖拽操作，生成 Vue 组件，无需编写代码。目前市面上已经有一些成熟的 Vue 可视化拖拽生成工具，比如： 1. Vue-Draggable：一个基于 Sortable.js 实现的 Vue 可视化拖拽组件库，支持多种自定义配置。 2. Vue-Form-Builder：一个基于 Vue.js 的可视化表单设计器，可以快速生成表单组件。 3. Vue-Design：一个基于 Vue.js 的可视化编辑器，支持拖拽组件、自定义样式、实时预览等功能。 4. Vue-Flow-Form：一个基于 Vue.js 的可视化表单设计器，支持拖拽组件、实时预览、表单验证等功能。以上是一些比较优秀的 Vue 可视化拖拽生成工具，可以根据自己的需求选择适合自己的工具。