Vue.js前端开发基础及项目化应用（微课版）-课程标准

《前端开发框架》课程标准课程名称：前端开发框架适用专业：软件技术课程学分：3.5参考学时：60，其中，理论学时28，实践学时32课程类别：专业基础课课程属性：必修课课程类型：B类（理论＋实践）产教融合课程、校企合作课程：是£否R一、课程定位1.课程性质本课程是软件技术专业二年级学生的专业基础课程，属于必修课。2.课程作用本课程主要培养学生前端框架技术应用，项目需求分析及功能实现能力，使学生能够独立开发Web应用前端项目。通过该课程的学习，学生将理解渐进式前端框架的工作原理，掌握Vue.js基本语法、与第三方库（axios、VueRouter和Vuex）结合应用、工程项目开发方法等内容，为基于框架的Web应用开发奠定基础。3.课程衔接在课程设置上，前导课程有《HTML5应用》，后续课程有：《JavaWeb开发框架》等。二、课程设计理念和思路本课程以本专业学生的就业为导向，根据用人单位对Web前端岗位的职业能力分析，以Vue.js技术为主线，以本专业应共同具备的岗位职业能力为依据，遵循学生认知规律，确定本课程的工作任务和课程内容。为了充分体现任务引领、实践导向课程思想，将本课程的教学活动分解设计成若干实践项目或工作情景，以具体的项目任务为单位组织教学，引出相关专业理论知识，使学生在实操过程中加深对专业知识、技能的理解和应用，培养学生的综合职业能力，满足学生职业生涯发展的需要。按照“以能力为本位，以职业实践为主线、以项目型课程为主体的模块化专业课程体系”的总体设计要求。该门课程以构建具有动态效果的网站为基础，紧紧围绕完成工作任务的需要来选择和组织课程内容，突出工作任务与知识的联系，让学生在项目实践活动的基础上掌握知识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。同时将1+X证书Web前端开发的核心考点为选取知识点的参照标准，结合职业技能大赛应用软件系统开发赛题难度设计训练项目，做到课-证-赛融通教学，并有机融入思政元素。课程教学目标本课程要求学生掌握Web前端页面布局设计的方法，能够使用HTML5、CSS3和JavaScript构建Web前端静态页面布局，结合Vue.js实现前端的数据交互与展示，具体内容包括理解Vue.js渐进式框架的核心思想，掌握Vue.js框架的基本语法、与第三方库结合使用的方法，了解网页设计、CSS样式、JavaScript和前端常用框架等内容。通过本课程的学习,学生能够在理解Vue.js应用方法的基础上，具备应用Vue.js解决Web前端开发的综合能力。（一）知识目标1.了解前端开发的MVVM模式；2.掌握Vue.js的基本概念、内置指令、组件、过渡与动画；3.掌握axios的安装与使用方法；4.掌握VueRouter的安装与使用方法；5.掌握Vuex的安装与使用方法；6.掌握VueCLI脚手架的安装与使用方法。（二）能力目标1.能够编写Vue.js单文件程序；2.能够利用选项式API和组合式API进行组件开发；3.能够利用axios实现异步请求和拦截处理；4.能够利用VueRouter实现路由定义、导航和导航守卫；5.能够利用Vuex实现状态管理；6.能够使用Vue.js结合第三方库实现前端界面布局、数据交互和展示。（三）素质目标1.培养交流、沟通的能力；2.形成勤奋学习的态度，严谨求实、创新的工作作风；3.树立高度责任心和良好的团队合作精神；4.养成良好的心理素质和职业道德素养。四、课程内容、教学要求与学时分配单元名称训练项目学习任务知识要求技能要求（含素质要求）教学方法与手段建议学时分配实践场所名称（含校外）特色说明（含思政改革、双创教育、产教融合教学、理实一体化教学、引入技能竞赛标准等特色）Vue.js开发基础项目1：历史名城网站界面布局任务1-1:Vue.js入门1.Vue的核心设计思想2.Vue开发环境搭建3.Vue开发和调试工具的使用4.Vue程序的创建方法1.掌握Vue开发环境的搭建、开发和调试工具2.理解Vue核心设计思想3.能够创建简单的Vue程序1.教学方法：采用案例分析、任务驱动等教学方法；2.教学手段：公开在线教育资源结合超星学习通APP使用。2校内机房教学思政改革特色：了解开源技术的使用规范，树立知识产权意识任务1-2:Vue基础语法1.Vue实例的配置选项2.data初始数据的定义3.常用的内置指令4.使用内置指令实现双向数据绑定5.列表渲染1.掌握Vue实例的创建2.掌握如何在Vue中进行数据绑定3.掌握Vue的事件监听操作6校内机房教学思政改革特色：1.培养学生踏实认真的学习态度，形成良好职业素养2.通过了解历史名城，增强学生的爱国意识；3.培养分析问题、解决问题能力任务1-3:Vue组件1.Vue组件2.组件间数据传递3.组件事件4.Vue生命周期钩子函数1.掌握Vue组件的定义和注册的方法2.掌握父子组件间数据的传递3.掌握组件事件监听和处理方法4.能够访问Vue组件生命周期钩子函数10校内机房教学思政改革特色：1.培养学生踏实认真的学习态度，形成良好职业素养2.通过了解历史名城，增强学生的爱国意识；3.培养分析问题、解决问题能力任务1-4:Vue过渡和动画1.过渡和动画基本实现方法2.基于钩子函数实现过渡和动画的方法3.多元素过渡4.列表过渡1.掌握内置过渡类的使用2.掌握JavaScript钩子创建动画和过渡效果的方法3.掌握单元素、多元素、多组件的过渡动画的实现方法4.掌握列表过渡的实现方法4校内机房教学思政改革特色：1.培养学生踏实认真的学习态度，形成良好职业素养2.通过了解历史名城，增强学生的爱国意识；3.培养分析问题、解决问题能力任务1-5：组合式API1.组合式API编写组件的方法2.setup函数3.访问生命周期钩子函数方法4.响应性原理5.provide/inject响应式传值方法1.理解组合式API和选项式API方法的区别2.能够编写组合式API组件3.能够使用provide/inject实现跨层传值6思政改革特色：1.培养学生踏实认真的学习态度，形成良好职业素养2.通过了解历史名城，增强学生的爱国意识；3.培养分析问题、解决问题能力Vue.js与第三方库结合应用项目2：历史名城网站用户交互任务2-1：axios异步处理1.异步编程解决方案2.Promise对象实现异步处理原理3.axios处理HTTP请求流程4.axios拦截器实现方法1.掌握Promise使用方法2.能够使用axios实现异步请求3.能够实现请求和响应拦截1.教学方法：采用案例分析、任务驱动等教学方法；2.教学手段：公开在线教育资源结合超星学习通APP使用。6思政改革特色：1.培养学生踏实认真的学习态度，形成良好职业素养2.通过了解历史名城，增强学生的爱国意识；3.培养分析问题、解决问题能力任务2-2:Vue路由1.VueRouter工作原理和基本使用2.路由属性的作用和实现方法3.动态路由的作用和实现方法3.导航和导航守卫的作用和实现方法1熟练VueRouter安装与使用2.能够实现嵌套和命名路由，路由视图3.能够利用路由传参实现动态路由4.能够应用编程式导航实现路由跳转5.能够实现全局导航守卫6校内机房教学思政改革特色：1.培养学生踏实认真的学习态度，形成良好职业素养2.通过了解历史名城，增强学生的爱国意识；3.培养分析问题、解决问题能力任务2-3:Vuex状态管理1.状态管理模式2.Vuex安装与使用3.Vuex核心属性1.熟练Vuex安装和使用2.能够利用Vuex核心属性实现组件间数据共享6校内机房教学思政改革特色：1.培养学生踏实认真的学习态度，形成良好职业素养2.通过了解历史名城，增强学生的爱国意识；3.培养分析问题、解决问题能力VueCLI构建工程项目项目3：TodoMvc任务3-1:VueCLI1.全局安装@vue/cli2.配置文件1.掌握VueCLI脚手架的安装与使用2.理解项目配置文件的常用配置项的作用1.教学方法：采用案例分析、任务驱动等教学方法；2.教学手段：公开在线教育资源结合超星学习通APP使用。2校内机房教学思政改革特色：1.培养学生踏实认真的学习态度，形成良好职业素养2.通过了解历史名城，增强学生的爱国意识；3.培养分析问题、解决问题能力任务3-2:项目搭建1.VueCLI脚手架的作用2.VueCLI及相关插件的安装方法1.能够配置单独的路由文件2.能够配置单独的Vuex状态存储文件3.能够配置axios请求和响应4校内机房教学思政改革特色：1.培养学生踏实认真的学习态度，形成良好职业素养2.通过了解历史名城，增强学生的爱国意识；3.培养分析问题、解决问题能力工程化项目实战项目4：图片素材网站任务4-1:项目总体设计分析1.项目的整体结构2.项目实现流程和规范3.代码编写规范1.根据需求设计项目功能模块2.能够依据流程和规范完成项目的功能模块构建1.教学方法：采用案例分析、任务驱动等教学方法；2.教学手段：轻工教育在线教育资源结合超星学习通APP使用。1校内机房教学思政改革特色：1.培养学生工程化思维、行业规范意识，形成良好职业素养；2.培养分析问题、解决问题、协作沟通能力。引入技能竞赛：对标职业技能大赛应用软件系统开发赛项任务4-2：项目构建1.Vue工程项目结构2.项目配置文件1.能够使用VueCLI创建Vue工程项目2.能够进行项目打包、远程访问等相关配置1思政改革特色：1.培养学生工程化思维、行业规范意识，形成良好职业素养；2.通过了解中国元素图片素材背后的故事，增加文化自信；3.培养分析问题、解决问题、协作沟通能力。引入技能竞赛：对标职业技能大赛应用软件系统开发赛项任务4-3:网站首页1.页面布局结构2.页面布局设计方法1.利用Vue.js、HTML5实现首页结构2.能够利用HTML5和CSS3实现轮播图等动态效果3.能够页头导航栏布局效果2校内机房教学思政改革特色：1.培养学生工程化思维、行业规范意识，形成良好职业素养；2.通过了解中国元素图片素材背后的故事，增加文化自信；3.培养分析问题、解决问题、协作沟通能力。引入技能竞赛：对标职业技能大赛应用软件系统开发赛项任务4-4：用户登录1.axios异步处理实现方法1.能够实现用户登录请求提交和验证2思政改革特色：1.培养学生工程化思维、行业规范意识，形成良好职业素养；2.通过了解中国元素图片素材背后的故事，增加文化自信；3.培养分析问题、解决问题、协作沟通能力。引入技能竞赛：对标职业技能大赛应用软件系统开发赛项任务4-5：图片分享1.axios异步处理实现方法2.文件上传和下载方法1.能够实现图片列表的读取和展示2.能够实现图片的上传和保存2思政改革特色：1.培养学生工程化思维、行业规范意识，形成良好职业素养；2.通过了解中国元素图片素材背后的故事，增加文化自信；3.培养分析问题、解决问题、协作沟通能力。引入技能竞赛：对标职业技能大赛应用软件系统开发赛项（请自行增加，切匆更改表格的格式和字体）—PAGE9—五、课程重难点1.教学重点及处理方法课程学习重点包括：Vue.js数据驱动和组件化核心技术。处理方法：将知识点分解成一个个训练项目，培养学生在Web前端开发的实际工作技能，锻炼思考问题、解决问题能力。2.教学难点及处理方法课程学习难点包括：Vue.js工程项目的构建、数据交互和展示。处理方法：将学生分成若干个小组，在教师的指导下小组成员互相讨论并完成项目创建。课程教学评价1．考核形式考核采取考勤评价、课堂互动、课后作业、期末综合项目等形式进行。2．考核评价表序号学习任务评价方式评分标准分数分配1考勤上课不迟到不早退按缺勤次数扣分10%2课堂互动依据互动情况互动次数10%3平时作业或项目实践项目考核和集中考核相结合，项目考核为该单元所有项目得分的平均分，集中考核为期末的综合作业得分。项目得分=专业技能得分（70%）+职业素养得分（20%）+项目文档得分（10%）；75%4课程思政依据学生学习表现、团队合作表现等正确价值观、项目实施进度和实施效果等5%合计100七、教学实施建议1.教学模式：线上+线下混合模式2.教学方法本课程采用案例分析、任务驱动等教学方法，通过师生完成一个个训练项目，培养学生在Web前端开发的实际工作技能，锻炼思考问题、解决问题、自主学习和创新能力，培养前端开发师岗位方面的综合职业能力。通过融入开源精神、知识产权意识、工匠精神等思政元素，挖掘专业思政元素，帮助学生树立正确价值观，培养其精益求精的工作态度和踏实肯干的工作作风。3.教学手段利用多媒体信息化技术，通过视频、微课、案例分析、在线教学平台等辅助教学手段让学生的学习更高效，师生互动更加密切。4.教材及课程资源（1）教材级教学参考书《Vue.js前端开发基础及项目化应用（微课版）》，古凌岚、肖蓉、袁宜英著，人民邮电出版社，2024-01备选教材:《循序渐进Vue.js3前端开发实战》，张益珲著，清华大学出版社，2022-01参考教材:《Web前端开发：高级》，工业和信息化部教育与考试中心主编，2019-08教学资源教师利用校内共享课程资源平台，开发《前端开发框架》课程的共享资源，向学生提供优质学习资源，制作微课，便于学生课前预习和课后复习。参考网站：1）Vue.js官方网站/2）VueRouter官方网站/3）Vuex官方网站/zh/guide/4）axios中文技术文