AS-Editor: Vue-based Visual Drag-and-Drop Page Builder

AS-Editor is a Vue-based visual drag‑and‑drop editor that generates pages by defining JSON, improving front‑end development efficiency and can be integrated into mobile projects.

Installation Guide

Run the following npm commands:

npm install – install node_modules.

npm run serve – start the development server.

npm run build – build the production package.

npm update – update packages within the allowed version range.

Note: In newer npm versions, peer‑dependency conflicts cause installation to fail; use npm install --legacy-peer-deps to bypass.

Usage Guide

The tool provides a step‑by‑step visual interface (see screenshots) for creating UI components. If the built‑in components do not meet requirements, custom components can be added.

Custom Component Files

src/layout/home/index.vue  // Edit page file
src/components/sliderassembly/index.vue  // Left component library file
src/components/componentscom  // Left component directory
src/components/rightslider  // Right component directory
src/utils/componentProperties.js  // Component data

ComponentProperties Definition

{
  component: 'custommodule',   // name of the middle mobile component
  text: '自定义模块',            // component description
  type: '1-14',                 // data-type
  active: true,                // whether selected
  style: 'custommodulestyle',  // name of the right‑side component style
  setStyle: {}                 // dynamic component data
}

Open‑Source Repository

The project is hosted at https://gitee.com/was666/as-editor .