121 Star 687 Fork 156

china-bin / vdesjs-drag

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Notice: Creating folder will generate an empty file .keep, because not support in Git

中文 | English


Version Documentation License: MIT

Introduction :loudspeaker: :loudspeaker:

vdesjs is a visual drag and drop, code generation tool based on vue technology stack. We provide detailed documentation to help you understand the implementation principles of our tools, and you can easily extend your own code generation components based on vdesjs.

show animation

Technical Selection :computer: :computer:

technology describes
Vue Draggable based on Sortable.js Vue drag component
vuex state management tool (understood simply to maintain a common variable in vue for global use)
clipboard. Js plug-in will text copied to the clipboard
element - UI based on Vue.js 2.0 desktop client UI framework
vant has praised the front-end team the mobile end of the open source component library (we will choose some vant components, as vdesjs left drag and drop components)
handlebars js template engine (vdesjs left drag component code generation templates choice handlebars as a template engine. If you want to write your own build templates, refer to the handlerbars syntax for writing)
vue - codemirror code editor (with its display as vdesjs code editor)

Project directory structure

├── build
├── config
├── src
│ ├── assets resource storage directory
│ │ ├── basics basic component resources
│ │ ├── business business component resources
│ │ ├── feeback feedback component resources
│ │ ├── form form component resource
│ │ ├── nav navigation component resources
│ │ └── show Show component resources
│ ├── common common code
│ │ ├── css public css
│ │ └── js public js
│ ├── components catalog
│ │ ├── basics basic components in the left drag panel
│ │ ├── business components in the drag panel on the left
│ │ ├── feeback The feedback component in the left drag panel
│ │ ├── form components in the drag panel on the left side of the form
│ │ ├── nav The navigation component in the left drag panel
│ │ ├── pcomp right property bar independent component
│ │ ├── show display components in the drag panel on the left
│ │ └── sub implements subcomponents of vdesjs
│ ├── handlebars template code storage directory
│ │ └── template
│ │ ├── basic basic component template code
│ │ ├── feeback feedback component template code
│ │ ├── form form component template code
│ │ ├── methods method template code under methods script tag
│ │ ├── nav navigation component template code
│ │ └── show show component template code
│ ├── page routing page
│ ├── router routing configuration
│ └── store vuex configuration
└── static

Steps to extend components :electric_plug: :electric_plug:

    1. Write the json data structure of the left component
    1. Write components and introduce components.
    1. Write code to generate templates
  • For detailed steps, please refer to the reference document below: vdesjs extends its own components

Reference documents :notebook: :notebook:

Continuous upgrade

The project will continue to be maintained and upgraded. If you encounter any bugs in use, or have any good suggestions about this project, you can contact the author.

Technical feedback exchange group :telephone_receiver: :telephone_receiver:

  • qq group number: 1125390832

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

Repository Comments ( 26 )

Sign in to post a comment


基于vue的可视化拖拽,代码生成工具。提升前端开发效率,或者集成至项目作为在线拖拽工具。(持续迭代升级中) expand collapse
JavaScript and 5 more languages





Load More
can not load any more