preface

First of all I admit I’m tagging… It is not so much a visual build tool as a visual generate page configuration tool, which uses drag-and-drop methods to generate page configurations, and then uses dynamic components of the framework to generate pages based on configuration.

Now the company, one by one began to complete their own component library, component library built, through business accumulation, aggregation of basic components and abstract part of the business code, and will produce a relatively high reuse of the block library, and visual construction, is based on the block library to achieve.

First of all, it is difficult to deal with logically complex scenarios and changing product requirements…

background

Daily development found in companies a lot of small projects grow to about the same, even some of the page is to other modules of the page to change the data, heap together out of a new page, and is particularly common in the operating activities page, and this kind of activity in the same page, if it makes drag drag ye should take up by operation, not make.

The project design

First of all, the page should be structured like this

The whole logic should go something like this

  • Click on the left list and the component will appear in the middle
  • Multiple components in the middle can be dragged and dropped to sort
  • There may be components that need to be nested and that can be dragged and dropped into container components
  • Click a component in the middle to expand its configuration items on the right
  • After modification on the right side, the effect in the middle is displayed in real time

Effect of the page

The simple page is finished as follows

On the left is a list of generated components based on a configuration file.

In the middle is a nested iframe that communicates with the outside world via postMessage. (originally trying to draw an iphone6, but it still looks like a 5s)

To the right is the location of the configuration component, followed by the effect map.

The drag part is implemented using VueDraggable, easy to explode.

Let’s do another dynamic diagram

You can see that the basic functions have been implemented. The configuration position on the right can handle String, Number, Boolean, Array, and Object data

summary

The project is still only a semi-finished product, mainly an idea, in fact, after the configuration generation can also do a lot of, such as

  • Data populating in the configuration is done by the back end
  • Based on the configuration, you can use multiple frameworks to implement the final page. You only need to set the component name according to the convention and pass data to the component through props. Vue, React, and even small programs can generate pages based on the configuration.
  • .

You have other ideas to discuss

Drop a Gayhub address, the code is slightly ugly, please give a star if you feel interesting:

Github.com/Lzzzzzq/vue…

Refer to the article

Front End Solution for Store Decoration of Youzamei