Bridging Code Snippets to Full-scale Front-end Engineering Projects: A Generative AI-assisted CDIO Framework for Vue.js Curriculum Reform

In Vue.js education, students often master isolated code snippets yet struggle to build complete, robust engineering projects. This study addresses this gap by integrating generative AI as a collaborative tool within the CDIO (Conceive-Design-Implement-Operate) framework to reform the curriculum. The course objectives have been restructured to shift from rote knowledge acquisition to the cultivation of full-lifecycle front-end engineering competencies and responsible AI collaboration skills. A four-stage hierarchical case library aligned with the CDIO phases provides tiered tasks scaled to students’ progressing competency levels. Students are guided to use generative AI judiciously for coding assistance and design ideation throughout the process. Assessment employs differentiated weighting across the CDIO stages, with safeguards against over-reliance, including closed-book examinations, reflective reports, and mandatory critical evaluation with manual refinement of AI-generated code. Teaching practice results show that the experimental group significantly outperformed the control group in engineering modeling and full lifecycle competency development. Student satisfaction averaged 4.75 out of 5, with an overall satisfaction rate of 93.5%. This reform effectively fosters an engineering mindset, bridges the gap between fragmented coding skills and comprehensive project development, and provides a replicable framework for front-end curriculum reform in the generative AI era.