职业技术学校《前端框架技术vue》课程标准

课程标准课程名称：前端框架技术专业大类：电子信息大类前端框架技术课程代码：0311067课程名称：前端框架技术课程性质：必修课程类别：职业技术基础课程适用专业：计算机应用技术、软件技术、移动互联应用技术开设学期：第一学期授课学时：64（理实一体）一、课程定位《前端框架技术》是计算机应用技术、软件技术、移动互联应用技术专业的一门职业技术基础课程，由浅入深地讲解了vue的语法及使用技巧，涵盖了vue的众多技术点，如SPA的项目结构、模板指令、组件及组件交互、路由router、状态管理pinia、项目构建vite等，通过理论、图解、实战的方式阐释vue的特性功能。通过学习本门课程，学生能更好地掌握vue的特性，并且将新技术运用到实际的开发当中，提高自己开发Web程序的水平。二、课程设计以就业为导向，以能力为本位，不局限于单纯的技能训练，在培养学生职业岗位能力的基础上，围绕高素质复合型技术技能型人才专业培养目标，培养学生的终身学习的能力和职业生涯发展所需的综合素养。课程建设优化传统HTML网页设计类课程教学内容，设计教学情境，开发课程案例，建设课程教学资源，实施基于混合式教学的“教学做”一体化教学方式，采用过程式考核方式，提高课程教学质量。课程教学按照：“提出工程实际案例、分析案例所需知识、知识准备、师生共同完成案例、布置任务、学生自主完成任务、小组交流、教师点评”的步骤进行。将课程基本知识点融于案例中，围绕着案例来开展课堂教学活动，引导学生参与分析、讨论，让学生在具体的问题情境中，积极思考，主动探索。课程教学内容符合职业技能培养要求，注重实践环节，实践性教学内容占课程内容的60﹪以上，课程既具有针对性、又具有技术性和综合性，有效地培养了学生复杂静态页面的设计与开发能力。三、课程目标（一）课程总目标通过基于工作过程的教学实施，使学生能够根据工作任务和要求，按网站设计的基本流程、需求规范，运用相关工具，独立自主完成基于vue技术的前端应用程序的设计与制作。同时对接行业标准和岗位要求强化学生的职业道德意识和职业素质养成意识；通过小组合作学习，培养学生团队合作、协议沟通能力；为后续Web前端开发打下坚实的基础。（二）课程具体目标1.知识目标（1）掌握vue+vite的项目创建；（2）掌握vue的模板语法；（3）掌握vue组件的创建和调用；（4）掌握vue父子组件间的交互；（5）掌握基于router库的SPA的开发；（6）掌握状态管理pinia库。2.能力目标（1）能够设计、制作和调试复杂前端应用程序；（2）能合理规划、管理站点；（3）能综合使用vue实现前端的数据输入与输出；（4）能综合使用vue实现前端的用户交互。3.素质目标（1）培养学生良好的语言表达能力；（2）培养学生自主学习习惯和团队合作能力，身心参与、手脑并用的劳动意识；（3）培养学生严谨细致的学习态度和追求完美的工匠精神；（4）树立坚定的理想信念，厚植爱国主义情怀；四、课程内容及学习情境根据Web前端开发工程师职业岗位的要求，遴选课程内容，课程内容打破学科体系，进行解构和重构。以真实的项目和任务为载体，基于Web前端开发的设计、开发与维护岗位的工作流程设置四个情境：1.vue的基础架构和语法，2.vue的组件开发，3.基于router库的SPA开发，4.基于pinia库的状态管理。课程的主要内容和要求见表1。表1课程内容和学习情境表序号学习情境学习载体主要学习内容学习目标学时1学习情境1vue的基础架构和语法“春雨助农网站”关于我们、产品详情任务1：搭建开发环境并创建项目项目任务：完成创建“春雨助农”商城项目框架1.掌握npm的安装；2.掌握vscode及相关插件的安装；3.掌握浏览器开发插件的安装；4.掌握使用npm命令创建项目；8任务2：导入静态素材资源项目任务：在main.js中导入必要的样式和脚本1.掌握main.js中基础代码的含义；2.掌握资源导入与导出的语法；2任务3：编写App.vue的<template>标签项目任务：利用静态页面素材实现关于我们视图1.掌握<template>标签的作用与语法；2任务4：使用axios请求服务器端json文件项目任务：请求服务器端的产品数据1.掌握json的语法格式；2.掌握axios的ajax请求语法；3.掌握vue的生命周期函数；4任务5：实现vue的数据展示项目任务：完成首页的产品列表功能1.使用data选项声明组件的响应式状态；2.掌握Vue的模板语法（文本插值、v-text、v-html、v-for、v-bind）；4任务6：实现用户数据的输入项目任务：完成产品详情视图1.掌握表单输入绑定模板指令v-model；42学习情境2vue的组件开发“春雨助农网站”关于我们、产品列表组件任务7：实现组件的创建与调用项目任务：使用组件重构关于我们视图1.掌握组件的创建与调用；2.掌握组件的模板插槽；4任务8：实现父子组件间的数据传递项目任务：实现产品列表组件的产品搜索功能1.使用组件的methods选项定义函数；2.通过props选项自定义组件属性；3.掌握监听事件模板指令v-on；4.使用$emit触发自定义事件；83学习情境3基于router库的SPA开发“春雨助农网站”产品详情任务9：router的引入和配置项目任务：完成“春雨助农”项目路由表的配置1.掌握MPA和SPA各自的特点；2.掌握vue-router库的安装；3.掌握vue-router的引入；4.掌握路由表的配置语法；4任务10：使用RouteLink和RouteView项目任务：完成首页和关于我们两个视图间的切换1.掌握RouteLink的使用；2.掌握RouteView的使用；4任务11：使用动态路由匹配项目任务：完成产品详情视图1.掌握路由参数的定义；2.掌握路由参数的获取；44学习情境4基于pinia库的状态管理“春雨助农网站”产品详情任务12：定义Pinia的Store项目任务：实现注册与登录功能1.掌握v-model和v-on指令的修饰符；2.掌握Pinia库的安装和引入；3.定义Pinia的Store；4任务13：订阅Pinia的状态更改项目任务：实现页头组件中登录成功后用户信息的显示、及用户注销1.使用$subscribe函数订阅状态更改；2.掌握模板指令v-show、v-if4任务14：定义Pinia的Action项目任务：完成购物车功能1.掌握定义Pinia的Action的语法；2.实现添加购物车项和修改购物车项的数量功能；3.实现显示购物车数据；4.实现计算购物车总金额；5.实现修改购物数量；8五、教学设计学习情境一：vue的基础架构和语法项目名称：“春雨助农”网站学时：24教学目标掌握开发环境的搭建掌握vue+vite项目的创建掌握导入与导出的语法掌握<template>标签的作用与语法掌握json的语法格式掌握axios的ajax请求语法掌握vue的生命周期函数使用data选项声明组件的响应式状态掌握Vue的模板语法（文本插值、v-text、v-html、v-for、v-bind）掌握表单输入绑定模板指令v-model教学重点掌握开发环境的搭建掌握vue+vite项目的创建掌握json的语法格式掌握axios的ajax请求语法掌握vue的生命周期函数掌握Vue的模板语法（文本插值、v-text、v-html、v-for、v-bind）掌握表单输入绑定模板指令v-model学习难点掌握vue+vite项目的创建掌握json的语法格式掌握axios的ajax请求语法掌握vue的生命周期函数子任务主要教学内容任务1：搭建开发环境并创建项目1.安装node.js及npm；2.安装vscode及其volar插件3.安装edge浏览器的devtools插件4.使用npm命令创建vue+vite项目项目任务：完成创建“春雨助农”商城项目框架任务2：导入静态素材资源1.解析main.js中基础代码的含义2.掌握资源导入与导出的语法项目任务：在main.js中导入必要的样式和脚本任务3：编写App.vue的<template>标签1.解析<template>标签的作用与语法项目任务：利用静态页面素材实现关于我们视图任务4：使用axios请求服务器端json文件1.掌握json的语法格式；2.掌握axios的ajax请求语法；3.掌握vue的生命周期函数项目任务：请求服务器端的产品数据任务5：实现vue的数据展示1.使用data选项声明组件的响应式状态2.掌握Vue的模板语法（文本插值、v-text、v-html、v-for、v-bind）项目任务：完成首页的产品列表功能任务6：实现用户数据的输入1.1.掌握表单输入绑定模板指令v-model；项目任务：完成产品详情视图教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境二：vue的组件开发项目名称：“春雨助农”网站学时：12教学目标1.掌握组件的创建与调用；2.掌握组件的模板插槽；3.使用组件的methods选项定义函数；4.通过props选项自定义组件属性；5.掌握监听事件模板指令v-on；6.使用$emit触发自定义事件；教学重点1.掌握组件的创建与调用；2.使用组件的methods选项定义函数；3.通过props选项自定义组件属性；4.使用$emit触发自定义事件；学习难点1.掌握组件的创建与调用；2.使用$emit触发自定义事件；子任务主要教学内容任务7：实现组件的创建与调用1.掌握组件的创建与调用；2.掌握组件的模板插槽；项目任务：使用组件重构关于我们视图任务8：实现父子组件间的数据传递1.使用组件的methods选项定义函数；2.通过props选项自定义组件属性；3.掌握监听事件模板指令v-on；4.使用$emit触发自定义事件；项目任务：实现产品列表组件的产品搜索功能教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境三：基于router库的SPA开发项目名称：“春雨助农”网站学时：12教学目标1.掌握MPA和SPA各自的特点；2.掌握vue-router库的安装；3.掌握vue-router的引入；4.掌握路由表的配置语法；5.掌握RouteLink的使用；6.掌握RouteView的使用；7.掌握路由参数的定义；8.掌握路由参数的获取；教学重点1.掌握vue-router的引入；2.掌握路由表的配置语法；3.掌握RouteLink的使用；4.掌握RouteView的使用；5.掌握路由参数的定义；6.掌握路由参数的获取；学习难点1.掌握路由表的配置语法；2.掌握路由参数的定义；3.掌握路由参数的获取；子任务主要教学内容任务9：router的引入和配置1.掌握MPA和SPA各自的特点；2.掌握vue-router库的安装；3.掌握vue-router的引入；4.掌握路由表的配置语法；项目任务：完成“春雨助农”项目路由表的配置任务10：使用RouteLink和RouteView1.掌握RouteLink的使用；2.掌握RouteView的使用；项目任务：完成首页和关于我们两个视图间的切换任务11：使用动态路由匹配1.掌握路由参数的定义；2.掌握路由参数的获取；项目任务：完成产品详情视图教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境四：基于pinia库的状态管理项目名称：“春雨助农”网站学时：16教学目标1.掌握v-model和v-on指令的修饰符；2.掌握Pinia库的安装和引入；3.定义Pinia的Store；4.使用$subscribe函数订阅状态更改；5.掌握模板指令v-show、v-if6.掌握定义Pinia的Action的语法；7.实现添加购物车项和修改购物车项的数量功能；8.实现显示购物车数据；9.实现计算购物车总金额；10.实现修改购物数量；教学重点1.掌握Pinia库的安装和引入；2.定义Pinia的Store；3.使用$subscribe函数订阅状态更改；4.掌握定义Pinia的Action的语法；学习难点1.使用$subscribe函数订阅状态更改；子任务主要教学内容任务12：定义Pinia的Store1.掌握v-model和v-on指令的修饰符；2.掌握Pinia库的安装和引入；3.定义Pinia的Store；项目任务：实现注册与登录功能任务13：订阅Pinia的状态更改1.使用$subscribe函数订阅状态更改；2.掌握模板指令v-show、v-if项目任务：实现页头组件中登录成功后用户信息的显示、及用户注销任务14：定义Pinia的Action1.掌握定义Pinia的Action的语法；2.实现添加购物车项和修改购物车项的数量功能；3.实现显示购物车数据；4.实现计算购物车总金额；5.实现修改购物数量；项目任务：完成购物车功能教学方法建议以理论讲解、演示为主，学生按照教学内容进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结，采用任务驱动教学。备注六、实施建议（一）教材选用与编写根据专业人才培养方案和课程教学目标选用理论实践一体化或项目课程教材。推荐教材1.Vue.js前端开发实战（第2版），黑马程序员，人民邮电出版社，2023参考书：1.Vue.js前端开发实战教程北京:人民邮电出版社,20222.Vue.js设计与实现北京:人民邮电出版社,20223.循序渐进Vue.js3前端开发实战北京:清华大学出版社,20224.网站5.网站（二）课程资源的开发与利用1.开发课件、微课等教学资源；2.选用符合教学要求的录像、课件、视频、资料文献等资源辅助教学；3.依托学校职教云教学平台进行课程资源建设。（三）教学基本条件1．专业教师的要求（1）具有前端新知识、新技能的学习能力和创新创业能力；（2）具备前端架构设计能力；（3）具备移动端开发能力；（4）具备前端组件化能力；（5）具备网站性能优化能力（6）具有较强的工作过程系统课程教学设计能力；（7）具有较强的行动导向教学组织与实施能力。2．学习场地、设施的要求为保证项目、任务的实施与完成，本课程必须在实践理论一体化教室完成教学过程。（四）教学建议1.本课程以实际的典型应用为基础构建学习载体，建议在每个学习情境的教学实施中，完全采用项目引导、任务驱动的行动导向教学，并以小组协作方式完成各项工作任务。2.以Web项目的设计、实现作为驱动主线，实现理论实践一体化教学。学生通过感性认识，理性思维，动手操作，完成Web项目的分析、设计、编码、调试和运行，在做中学，在学中做，最终达到真正听得懂，学得会，做得好，切实提高动手能力和分析问题、解决问题的综合素质。3.在教学过程中，要创设工作情景，同时应加大实践实操的容量，要紧密结合职业技能等级证书的考证，加强考证的实操项目的训练，在实践实操过程中，使学生掌握前端应用程序应有的技能，提高学生的岗位适应能力。4.在教学过程中，要尽量应用多媒体、动画视频、演示等教学资源辅助教学，帮助学生理解相关概念。5.在教学过程中，在教学过程中，关注软件产业发展新业态、新模式，对接新技术、新工艺、新规范发展趋势，贴近生产现场。为学生提供职业生涯发展的空间，努力培养学生参与社会实践的创新精神和职业能力。6.教学过程中教师应积极引导学生提升职业素养，培养职业道德。七、教学评价（一）成绩构成本课程主要以过程考核为主，考核涵盖学习情境全过程，既评价学生专业能力，也评价学生交流沟通、团队协作、自主学习、问题的分析与处理等非专业能力，以促进学生综合职业能力的养成。课程总评成绩=项目成绩（70%）+作业成绩（10%）+考勤（10%）+课堂活动成绩（10%）（二）项目成绩评价指标项目总分100分，项目考