Research on Experimental Teaching Reform of Vue.js Course Based on CDIO and Knowledge Graphs

Abstract

With the rapid advancement of information technology and the increasing emphasis on engineering education certification, traditional experimental teaching models exhibit significant limitations in fostering students' abilities to address complex engineering problems. Using the Vue.js front-end development course as a case study, this paper proposes an experimental teaching reform model based on the integration of CDIO and knowledge graphs. The proposed model first constructs a structured, visualized, and interconnected Vue.js knowledge graph to organize course content. Guided by the CDIO (Conceive, Design, Implement, Operate) engineering education framework, the model then restructures the experimental teaching process around authentic projects, dividing it into four stages aligned with six experimental modules. This approach achieves a deeper integration of theoretical instruction and engineering practice. Teaching practice demonstrates that the reform model significantly enhances students’ systematic knowledge construction, practical engineering skills, and capacity for innovation and collaboration, thereby offering an effective pathway for preparing learners to meet the evolving demands of the front-end technology ecosystem and the software industry.