随着移动互联网时代的到来,PC互联网向移动端迁移的步伐在进一步加快。在迁移过程中,为了适应各种分辨率的屏幕需要进行针对性开发,开发和维护成本很高,响应式布局设计因为能够适应各类尺寸和配置的设备而脱颖而出。在软件系统开发过程中,由于大量的前端组件复用,使代码出现大量冗余,为进一步提高开发效率,我们将复杂的场景拆分成若干小部分,相互之间独立开发,再进行任意的组合,这种化繁为简的思想在前端领域体现为组件化。本文以Z公司ERP系统为背景,根据系统希望向移动端迁移的需求,在技术上选择响应式布局技术,针对现使用的ERP系统中存在的前端框架ExtJs过于庞大、组件扩展支持度不高和样式设计不太灵活的缺点,提出专门为ERP系统开发出一套轻量级组件,采用基于MVVM模式的Vue.js作为组件开发技术框架,对组件进行了基础样式设计、功能设计和API接口设计,完成功能的同时能够根据具备一定响应式功能。对上述所实现的轻量级组件应用到Z公司ERP系统的模块中作为应用测试。结果表明,所开发的组件易扩展,样式设计灵活、能够自适应布局且能够支持在开发过程中单组件引入。组件能够与响应式布局良好的结合,与原系统中ExtJs相比,能大大降低了代码的冗余量,提高加载速度,实现了在不同分辨率屏幕下良好的展示效果和交互体验,减轻了前端开发者的工作同时也可观地降低了公司开发成本。