随着互联网科技的发展,数据量的不断增大,对前端的要求也越来越高。由于传统的前端开发方式技术门槛要求较高,且页面的样式、功能相似,多为重复性工作,严重影响了前端工作人员的开发效率与工作热情。因此为解决上述难题,公司内部决定采用组件化技术以及现如今流行的前端技术框架对ERP系统进行组件化开发,从而提高前端页面的开发效率。基于组件的可视化编辑系统将为前端开发者提供封装后的各类UI组件、可视化的操作以及平台化的服务,从而大大提高前端页面的开发效率。系统的实现主要涉及的技术点为组件化、可视化以及代码的生成。与传统的前端页面开发方式不同,在基于组件的可视化编辑系统中,通过组件化的思想,将页面中常用的组件抽象出来,对组件进行封装,屏蔽组件的内部实现细节,为用户提供统一的接口,并且使用了现阶段流行的前端技术框架Vue,来提高浏览器的性能,方便系统实现可视化。通过Vue技术的封装,对组件的属性、数据逻辑进行可视化,利用拖拽、点击等方式方便用户进行页面内容的编辑,从而提高前端页面开发效率,将需要进行封装的组件以json格式在系统中进行声明,利用系统中实现的HTML模型、CSS模型以及JS模型,生成组件的实际代码,最终组装成为完整的自定义页面的前端代码。目前系统虽尚未在公司内部进行实际的试用,但本文进行了详细的需求分析与设计以及严谨的运行测试,期望能够应用到公司并得到良好的用户反馈,从而证明在前端可视化方面本文的研究价值。