1. Project Overview

AS-Editor

A Vue-based visual drag-and-drop editor and page generation tool. 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

Usage instructions

Usage Tutorial

4. Feature Overview

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

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)

Note: In newer versions of npm, npm install fails by default when encountering conflicting peerDependencies. You can use: npm install --legacy-peer-deps

For custom components, refer to:

src / layout / home / index.vue                 // Edit page file
src / components / sliderassembly / index.vue   // Complete collection of left-side components
src / components / componentscom                // Left-side component directory
src / components / rightslider                  // Right-side component directory
src / utils / componentProperties.js            // Component data

componentProperties (Component Data) Field Descriptions

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