Low-Code Page Building Workbench with Drag-and-Drop and Vue Element UI Code Generation

What is recommended in this issue is a scenario-based LowCode workbench——Sparrow。

Sparrow is a set of scene low-code page building workbench, through the preset components simple drag and drop can quickly build the page, after the production can be online debugging instant experience, real-time modification, page effect is WYSIWYG, and support the generation of source code.

main function：

• Low code development, quickly generate readable, vue element-ui component library source code
• Visual development, generating page code source files through the GUI
• Asset market, code resource sharing, including components, edit blocks, static blocks, search components

operating principle：

• First select the scene editor (form, table, block, etc.) and the scene editor renders to the page
• Select materials (components, blocks) through the scene-specific editor, and select actions to send to the server
• The server side generates the source code and outputs the source code to the preview project
• Preview projects in real time with webpack hot updates

install：

• Global installation

# Global installation$ npm install -g sparrow-code# operation$ sparrow

• In-project installation

# In-project installation$ npm install sparrow-code -D# package.json add sparrow"scripts": {"sparrow": "sparrow start -m page"}# Install GUI components in the project$ npm install @sparrow-vue/develop-ui -S# In-project reference App.vue<template><div id="app"><router-view /><sparrow /></div></template><script>import Sparrow from '@sparrow-vue/develop-ui'export default {components: {Sparrow},name: 'App'}</script>

demonstration:

• Partial assembly

• operation

• View code

Read more on your own.