中文 | English

vdesjs

Introduction

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.

Technical Selection

Project directory structure

vdesjs
├── 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

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

Reference documents

• vdesjs realization principle
• vdesjs extends its own components

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

• 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