1. Project Overview

AS-Editor

A visual drag-and-drop page editor and generator based on Vue3.x. It improves frontend development efficiency and can be integrated into mobile projects to generate UI interfaces directly from JSON definitions.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

A visual drag-and-drop page editor and generator based on Vue. It improves frontend development efficiency and can be integrated into mobile projects to generate UI interfaces directly from JSON definitions.

Powerful Features

A visual drag-and-drop page editor and generator based on Vue. It improves frontend development efficiency and can be integrated into mobile projects to generate UI interfaces directly from JSON definitions.

Simple Configuration

Get started with minimal configuration.

Completely open-source

Community-driven development. Work together to bring your ideas to life.

Official Ecosystem

Project

Description

AS-Editor

Vue 2 Version

AS-Editor based on Vue 2

AS-Editor

Vue 3 Version

AS-Editor based on Vue 3

AS-Editor-H5

AS-Editor-H5 is a mobile Vue template that generates Vue pages from predefined JSON configurations.

5. Tech Stack

Installation Guide

1. npm install (Install node_modules dependencies)
2. npm run serve (Run the application)
3. npm run build (Build the project)
4. npm update (Update packages to the latest versions within their specified version ranges)

For custom components, refer to:

src / layout / home / index.vue                 // Page editor file
src / components / sliderassembly / index.vue   // Complete list of components in the left panel
src / components / componentscom                // Left panel component directory
src / components / rightslider                  // Right panel component directory
src / utils / componentProperties.js            // Component data

componentProperties (Component Data) Field Descriptions

{
  component: 'custommodule',    // Name of the mobile component in the center panel
  text: 'Custom Module',         // Component text description
  type: '1-14',                  // data-tpye
  active: true,                  // Whether the component is selected
  style: 'custommodulestyle',    // Name of the component settings on the right panel
  setStyle: {}                   // Dynamic component data
}