On the basis of the second version, I have roughly completed the development plan of the third version, added the concept of the project, supported the node tree visual operation node, supported the export code, and fixed some known bugs.

The project has basically reached a closed loop. I would like to elaborate my idea about this project

One. What is needed?

The React ecosystem component library provides secondary development capabilities and generates WYSIWYG UI code.

Ii. What do you want the project to do?

  • Reduce repetitive UI
  • The base interface can be detached from the editor
  • Visible and available layout

preface

  • “Basic Introduction to the Project”
  • “Project Basic Use”
  • Point 1. “Think” layout to define component locations, not to adjust position 2 by component. Component uses Json as visual operation three. Feel free to use the React framework for secondary development of components and layouts to suit your own needs

Demo

I. Create a project

The main purpose is to save the project progress, prevent refresh, page exceptions and other situations, need to save in time.

Two. Basic page

  1. Define the structure by layout
  2. Select the node by clicking or node tree
  3. Operation node properties

Three. Generate code

Four. Download code to run the code locally

  1. Export code
  2. Import to the project directory
  3. Introducing dependent dependencies
  4. The relevant location brings in project code
  5. Run the project

Five. Operation effect

Development plan

4th Edition [not started]

  • Support CSS units [do not consider support, recommend using plug-ins to directly convert PX to related units]
  • Support component library built-in layout [✅]
  • internationalization
  • Project optimization (usability, usability)
  • Project related articles (secondary development based on other component libraries)
  • Support for subsequent features

Edition 5 [See follow-up requirements]

address

Online address

The project address

subsequent

The project has not gone through specific project practice, and several important problems are still being solved. In the recent project, I would like to see whether specific practice can be carried out and record the problems in the development of the fourth and fifth editions.