AS-Editor基于Vue开源的可视化拖拽编辑页面生成工具

技术社区 作者：FastSign 2025-07-07 00:14:06 阅读：52

AS-Editor 是一个基于 Vue 的可视化拖拽编辑页面生成工具，旨在提升前端开发效率，特别适用于需要快速构建和迭代 UI 界面的场景，可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。

应用场景

快速原型设计：通过拖拽组件快速构建页面原型，加速产品设计和验证过程。

页面定制化：为不同业务需求提供灵活的页面定制能力，通过 JSON 配置即可生成所需 UI。

移动端项目开发：特别适用于移动端 Vue 项目，通过定义的 JSON 直接生成 Vue 页面，简化开发流程。

功能模块

可视化拖拽界面：用户可以通过拖拽操作，直观地在编辑器中布置和调整组件。

组件库：提供丰富的组件库，包括基础组件和自定义组件，满足多样化的需求。

属性配置：支持对组件进行详细的属性配置，如样式、事件处理等。

实时预览：提供实时预览功能，用户可以随时查看编辑效果。

代码生成：根据拖拽和配置结果，自动生成对应的 Vue 代码。

功能特点

高效易用：通过拖拽和配置即可快速生成页面，降低开发门槛，提高开发效率。

灵活扩展：支持自定义组件和扩展，满足不同项目的特定需求。

实时反馈：提供实时预览功能，帮助用户即时查看和调整页面效果。

移动端适配：特别针对移动端项目进行了优化，支持通过 JSON 生成移动端 Vue 页面。

安装教程

注：在新版本的npm中，默认情况下，npm install遇到冲突的peerDependencies时将失败。 可使用：npm install --legacy-peer-deps。

npm install （安装 node_modules 模块）npm run serve （运行）npm run build （打包）npm update (用于更新包到基于规范范围的最新版本)

开源地址

https://gitee.com/was666/as-editor