Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/china-bin/vdesjs-drag
基于vue的可视化拖拽，代码生成工具。
https://github.com/china-bin/vdesjs-drag
builder drag h5 site-generator website-generation
Last synced: 3 months ago
JSON representation
基于vue的可视化拖拽，代码生成工具。
- Host: GitHub
- URL: https://github.com/china-bin/vdesjs-drag
- Owner: china-bin
- License: mit
- Created: 2020-11-29T03:40:03.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-04-19T04:34:56.000Z (over 3 years ago)
- Last Synced: 2024-05-14T19:48:32.886Z (6 months ago)
- Topics: builder, drag, h5, site-generator, website-generation
- Language: Vue
- Homepage:
- Size: 8.97 MB
- Stars: 96
- Watchers: 4
- Forks: 30
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
- License: LICENSE
Awesome Lists containing this project
- awesome-hacking-lists - china-bin/vdesjs-drag - 基于vue的可视化拖拽，代码生成工具。 (Vue)
README
[中文](./README.md) | English
vdesjs
## 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.
## Technical Selection :computer: :computer:
| technology | describes |
| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| [Vue Draggable](https://github.com/SortableJS/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](https://github.com/zenorocha/clipboard.js)| plug-in will text copied to the clipboard
| [element - UI](https://element.eleme.cn/#/zh-CN) | based on Vue.js 2.0 desktop client UI framework
| [vant](https://vant-contrib.gitee.io/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](https://github.com/handlebars-lang/handlebars.js) | 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](https://github.com/surmon-china/vue-codemirror) | code editor (with its display as vdesjs code editor) |
## 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 :electric_plug: :electric_plug:
* 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](https://www.jianshu.com/p/e22f7158b863)
## Reference documents :notebook: :notebook:
* [vdesjs realization principle](https://www.jianshu.com/p/8b28e71e3d12)
* [vdesjs extends its own components](https://www.jianshu.com/p/e22f7158b863)
## 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
``` bash
# 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
```