当前位置:首页 > 技术分析 > 正文内容

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

ruisui882个月前 (03-05)技术分析8

项目介绍

基于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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2511.html

分享给朋友:

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

掌握版本控制:Git的那些常见用法与技巧

Git作为现代开发中最常用的版本控制系统,它的普及和高效性使得程序员几乎每天都在与它打交道。无论是个人项目,还是团队协作,Git都能帮助我们追踪代码的修改历史,保证代码版本的管理井井有条,并在多人协作时有效地避免冲突。本文将分享一些常见的Git用法与技巧,帮助你更好地掌握Git的强大功能,并提升你在...

快速掌握 Git:程序员必会的版本控制技巧

在现代软件开发中,版本控制系统(VCS)是开发人员不可或缺的工具。无论是个人项目,还是多人协作的团队开发,良好的版本控制都能确保代码管理的高效性与稳定性。而在版本控制系统中,Git 凭借其分布式、灵活性和高效性,成为了最流行的工具之一。几乎所有的开发团队都在使用 Git 来管理代码版本、协作开发和追...

前后端分离自动化运维平台开发

运维平台采用前后端分离:前端vue,框架vue-element-admin;后端python,框架django-rest-framework.目前运维平台模块如下:1、 CMDB管理应用管理、环境管理、开发语言管理、产品项目管理、资产管理2、 构建发布持续构建、持续部署、Jar工程依赖构建3、 容器...

7 招教你轻松搭建以图搜图系统

作者 | 小龙责编 | 胡巍巍当您听到“以图搜图”时,是否首先想到了百度、Google 等搜索引擎的以图搜图功能呢?事实上,您完全可以搭建一个属于自己的以图搜图系统:自己建立图片库;自己选择一张图片到库中进行搜索,并得到与其相似的若干图片。Milvus 作为一款针对海量特征向量的相似性检索引擎,旨在...

vue2中路由的使用步骤,你学会了吗?

今天我们来整理下关于vue2中路由的使用步骤:1. 导入 vue 文件和Vue-router文件(注意:vue-router是依赖vue运行的,所以一定在vue后引入vue-router)2. 定义路由组件模板3. 创建路由实例并定义路由规则4. 将路由实例挂载给Vue实例5. 在结构区域定义控制路...

史上最全 vue-router 讲解 !!!

前端路由 前端路由是后来发展到SPA(单页应用)时才出现的概念。 SPA 就是一个WEB项目只有一个 HTML 页面,一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转。 前端路由在SPA项目中是必不可少的,页面的跳转、刷新都与路由有关,通过不同的url显示相应的页面。 优点:前...