基于Vue的可视化编辑器的研究与实现  

Research and Implementation of Visualization Editor Based on Vue

作　　者：朱永萍 

机构地区：[1]华北水利水电大学信息工程学院,河南郑州450045

出　　处：《工业控制计算机》2025年第4期90-92,共3页Industrial Control Computer

基　　金：河南省高等教育教学改革研究与实践重大项目:基于全生命周期的高校教学管理的智能实现研究与实践(2021SJGLX017)。

摘　　要：在页面开发过程中,采用图形化的界面来完成页面的编辑和配置可以降低技术门槛,减少开发中的重复工作,降低维护成本。可视化编辑器以前端框架Vue为基础,使用Vue-Grid-Layout,实现了具有自定义布局的功能,用户通过拖动已提供的基础组件,修改相应组件的属性配置,所见即所得的方式灵活快速地构建出满足需求的页面,实时预览页面在浏览器中的效果进行动态调整,并自动生成相应的页面代码,导出的文件可以按需引入到项目中使用,无需深入了解代码细节,为开发带来更多的便利和可能性。In the process of page development,using a graphical interface to complete the editing and configuration of the page can reduce the technical threshold,reduce the repeated work in the development,and reduce the maintenance cost.Before end framework Vue as the basis,using Vue-Grid-Layout,implements the custom layout of visual editor,the user by dragging the basic components,modify the properties of the corresponding component configuration,what you see what you get way to quickly meet the requirements of the page,real-time preview page in the browser effect of dynamic adjustment,and automatically generate the corresponding page code,exported files can be introduced into the project on demand,no need to understand the code details,bring more convenience and possibility for development.

关 键 词：Vue Vue-Grid-Layout 可视化 

分 类 号：TP311.52[自动化与计算机技术—计算机软件与理论]