基于vue实现可视化拖拽编辑器,页面生成工具,提升前端开发效率

项目介绍

基于vue实现的可视化拖拽编辑器,实现页面生成工具,提升前端开发效率。可以基层到移动端项目作为自定义json直接生成UI页面。

项目特点

功能特点

  1. 页面管理
  2. 页面设置
  3. 组件管理
  4. 组件设置
  5. 数据导入导出
  6. 预览重置

自定义组件目录

src / layout / home / index.vue                 // 编辑页面文件
src / components / sliderassembly / index.vue   // 左侧组件大全文件
src / components / componentscom                // 左侧组件目录
src / components / rightslider                  // 右侧组件目录
src / utils / componentProperties.js            // 组件数据

项目预览

基础组件:推动基础组件到页面编辑区,可以快速的实现组件所实现的功能。

组件设置:点击组件后可以在组件右侧设计组件属性。

组件管理:在组件管理中可以针对设计的组件进行设置。

页面设置:可以通过页面设置,设置页面的全局属性。

导出json:支持导出页面json数据。

导入json:可以通过导入json的方式生成页面配置,与导出json配合使用,可以持久化保存json。

项目源码

AS-Editor

原文链接:,转发请注明来源!