前端开发框架是构建现代化企业应用系统的核心技术之一，通过提供一系列预定义的组件和UI元素，使开发人员可以更加高效构建复杂的Web应用系统界面。Vue.js是一种现代化的前端JavaScript框架，它以其简洁的API、灵活的组件系统和高效的虚拟DOM更新策略而受到广泛关注，其岗位需求数量在所有前端开发岗位中遥遥领先。为适应行业与企业岗位能力要求，结合高职院校学生的学习能力水平，本教材以科悦智慧零售官网项目为载体，全面系统地介绍了Vue前端框架技术，以“项目贯穿、学以致用”为原则完成编写。
本教材在知识体系上按照Vue.js技术的由浅入深、由易到难进行设计，同时贯穿了一个企业级项目——科悦智慧零售官网，将项目的需求背景、系统设计、功能模块的编码实现各开发环节与各章节相应知识技能相融合，同时配以丰富的案例，实现了“知识—技能—案例—项目”一体化的学习方式。教材共分为七个模块，包括搭建开发与调试环境、Vue中的对象与组件、生命周期与数据绑定、条件渲染与列表渲染、Vuex状态管理、Vue过渡与动画、Vue路由和科悦智慧零售官网的实现。每个模块以应用案例开发的方式阐述知识要点，且至少包含一个科悦智慧零售官网商城模块功能进行项目贯穿，最后辅以章节习题和课后实践作业，通过丰富的练习与习题，将所学知识技能进行巩固。本教材配备教案、微课、题库、案例源码、课件等丰富的资源，方便教学和学习。
为紧跟产业需求发展,每章节开头增加了思维导图,能够使读者更快捷地了解章节内容;每章节均有配套的实训项目、练习与习题,以较基础的实训项目开始,进一步引导读者在实践中学习操作,通过丰富的练习与习题反复巩固章节知识要点；最后,本教材专门丰富了微课内容,使教学资源更加完善。本教材可以作为高职高专计算机相关专业和非计算机专业前端开发框架课程的教材,适合计算机软件开发人员、从事前端开发工作的专业人员和广大计算机爱好者自学使用。
作为教材使用时,参考学时为64学时,建议采用理论与实践一体化教学模式。本教材由唐俊、张小寒、欧阳林任主编，谢路、汪铭杰、吴丹、张云鹏、张俊萌任副主编，戴臻、黄蓉、邹元杰、连春燕、易灿参与编写。
本教材内容是编者多年从事前端开发框架课程教学经验的总结。由于时间仓促,作者水平有限,教材中难免会有疏漏与不妥之处,敬请广大读者批评指正。
模块一开发环境搭建1
任务1.1理解Vue的核心设计思想3
1.1.1为什么有Vue3
1.1.2Vue是什么4
1.1.3Vue的优势5
任务1.2Vue开发环境搭建7
1.2.1介绍Vue开发工具7
1.2.2搭建Vue开发环境8
1.2.3安装vuedevtools11
任务1.3Vue项目的创建14
1.3.1创建Vue项目14
1.3.2运行Vue项目17
1.3.3调试Vue项目18
模块小结21
模块训练22
模块单词23
模块二实现商品列表24
任务2.1商品列表显示26
2.1.1Vue应用实例26
2.1.2Vue内置指令28
2.1.3Vue生命周期30
任务2.2商品列表管理38
2.2.1表单输入绑定38
2.2.2Vue事件处理40
2.2.3计算属性47
2.2.4侦听器49
任务2.3商品列表优化57
2.3.1Vue组件57
2.3.2组件间通信59
2.3.3slot插槽63
模块小结74
模块训练75
模块单词76
模块三实现购物车管理77
任务3.1使用Vuex79
3.1.1什么是Vuex79
3.1.2安装Vuex81
任务3.2实现购物车83
3.2.1state83
3.2.2mutation86
3.2.3getter88
3.2.4action91
3.2.5module93
模块小结107
模块训练108
模块单词109
模块四实现数据过渡与动画110
任务4.1理解Vue过渡和动画基础112
4.1.1过渡和动画112
4.1.2CSS过渡类名113
4.1.3CSS动画116
任务4.2实现购物车动画119
4.2.1transition钩子函数119
4.2.2小球移动动画120
任务4.3商品列表过渡126
4.3.1列表的进入和离开过渡126
4.3.2列表的排序过渡128
4.3.3列表的渐近延迟过渡129
模块小结134
模块训练135
模块单词136
模块五管理购物商城路由137
任务5.1使用路由139
5.1.1什么是路由139
5.1.2路由安装140
5.1.3Vue Router的使用141
任务5.2实现商品详情页146
5.2.1带参数的动态路由146
5.2.2嵌套路由150
5.2.3编程式导航153
5.2.4命名路由156
5.2.5命名视图158
模块小结164
模块训练165
模块单词166
模块六使用第三方组件167
任务6.1使用网络请求库Axios169
6.1.1Axios是什么169
6.1.2安装Axios169
6.1.3Get和Post请求170
6.1.4跨域请求数据172
任务6.2使用Element Plus组件库177
6.2.1Element Plus简介177
6.2.2Element Plus安装178
6.2.3Element Plus基础组件179
6.2.4Element Plus表单组件184
6.2.5Element Plus数据展示189
模块小结202
模块训练203
模块单词204
模块七实现智慧零售官网205
任务7.1搭建项目基础框架207
7.1.1理解项目需求207
7.1.2搭建项目框架209
7.1.3搭建开发环境210
任务7.2设计与实现系统核心功能模块213
7.2.1官网首页设计213
7.2.2登录/注册模块218
7.2.3页面组件及路由配置219
模块小结225
模块训练226
模块单词227
随着互联网的快速发展和Web应用的普及，前端技术在近年来得到了极大的重视和发展。作为一种现代化的前端框架，Vue.js在业界受到了广泛的关注和认可。它以其简洁、灵活、高效的特性，成为了构建交互式、响应式和可维护性强的Web应用的首选框架之一，其岗位需求数量在所有前端开发岗位中遥遥领先。为适应行业与企业岗位能力要求，结合高职院校学生的学习能力水平，本教材以科悦智慧零售官网项目为载体，全面系统地介绍了Vue前端框架技术，以“项目贯穿、学以致用”为原则完成编写。本教材在知识体系上按照Vue.js技术的由浅人深、由易到难进行设计，同时贯穿了一个企业级项目——科悦智慧零售官网，将项目的需求背景、系统设计、功能模块的编码实现各开发环节与各章节相应知识技能相融合，同时配以丰富的案例，实现了“知识—技能—案例—项目”一体化的学习方式。教材共分为7个模块，包括搭建开发与调试环境、Vue中的对象与组件、生命周期与数据绑定、条件渲染与列表渲染、Vuex状态管理、Vue过渡与动画，Vue路由和科悦智慧零售官网的实现。每个模块以应用案例的方式阐述知识要点，且至少包含一个科悦智慧零售官网商城模块功能进行项目贯穿，最后辅以章节习题和课后实践作业，通过丰富的练习与习题，将所学知识技能进行巩固。本教材配备微课、案例源码、课件等丰富的资源，方便教学和学习。本教材可以作为高职高专计算机相关专业和非计算机专业Web开发课程的教材，适合计算机软件开发人员、系统运维工作的专业人员和广大计算机爱好者自学使用。本教材作为教材使用时，参考学时为64学时，建议采用理论与实践一体化教学模式。本教材内容是编者多年从事前端开发框架相关课程教学经验的总结。由于时间仓促，作者水平有限，教材中难免会有疏漏与不妥之处，敬请广大读者批评指
