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

课程标准课程名称：前端框架技术专业大类：电子信息大类前端框架技术课程代码：0311067课程名称：前端框架技术课程性质：必修课程类别：职业技术基础课程适用专业：计兑机应用技术、软件技术、移动互联应用技术开设学期：第一学期授课学时：64（理实一体）一、课程定位前端框架技术是计算机应用技术、软件技术、移动互联应用技术专业的一门职业技术基础课程，由浅入深地讲解了VUe的语法及使用技巧，涵盖了VUe的众多技术点，如SPA的项目结构、模板指令、组件及组件交互、路由router、状态管理Pinia、项目构建Vi1.e等，通过理论、图解、实战的方式阿群YUe的特性功能。通过学习本门课程，学生能更好地掌握VUC的特性，并且将新技术运用到实际的开发当中，提高自己开发WCb程序的水平.二、课程设计以就业为导向，以能力为本位，不局限于单纯的技能训练，在培养学生职业岗位能力的基础上，围绕高素质第合型技术技能型人才专业培养目标，培养学生的终身学习的能力和职业生涯发展所需的综合素养。课程建设优化传统Hn1.1.网页设计类课程教学内容，设计教学情境，开发课程案例，建设课程教学资源，实施基于混合式教学的“教学做”一体化教学方式，采用过程式考核方式，提高课程教学质星。课程教学按照：”提出工程实际案例、分析案例所需知识、知识准符,和生共同完成案例、布置任务、学生自主完成任务、小组交流、教加点评”的步骤进行。将课程基本知识点融于案例中，闱绕着案例来开展课堂教学活动,引导学生参与分析、讨论，让学生在具体的问题情境中，枳极思考，主动探索。课程教学内容符合职业技能培养要求，注重实践环节，实践性教学内容占课程内容的60%以上，课程既具有针对性、又具有技术性和综合性，有效地培养了学生复杂静态页面的设计与开发能力。三、课程目标（一）课程总目标通过基于工作过程的教学实施，使学生能够根据工作任务和要求，按网站设计的基本流程、需求规范，运用相关工具，独立自主完成基于VUe技术的前端应用程序的设计与制作。同时对接行业标准和岗位要求强化学生的职业道谯意识和职业素质养成意识：通过小组合作学习，培养学生团队合作、协议沟通能力：为后续Web前端开发打卜.坚实的基础。（二）课程具体目标1.知识目标（1）掌握vue+vite的项目创建：（2）掌握VUe的模板语法：（3）掌握VUe组件的创建和调用；（4）掌握VUe父子组件间的交互；（5）掌握基于r。Uter库的SPA的开发；（6）掌握状态管理Pinia库。2,能力目标（1）能够设计、制作和调试复杂前端应用程序；（2）能合理规划、管理站点；（3）能综合使用vue实现前端的数据输入与输出：（4）能综合使用VUe实现前端的用户交互。3.素质目标（1）培养学生良好的语言表达能力：（2）培养学生自主学习习惯和团队合作能力，身心参与、手脑并用的劳动意识:（3）培养学生.严遂细致的学习态度和追求完美的工匠精神：（4）树立坚定的理想信念，厚植爱国主义情怀：四、课程内容及学习情境根据WCb前端开发工程师职业岗位的要求，遴选课程内容，课程内容打破学科体系，进行解构和重构。以真实的项目和任务为载体,基于Web前端开发的设计、开发与维护闵位的工作流程设置四个情境：1.VUC的基础架构和语法，2.vue的组件开发，3.基于router库的SPA开发，4.基于Pinia库的状态管理。课程的主要内容和要求见表1。表1课程内容和学习情境表序号学习情境学习或体主夫学习内容学习目标学时1学习情境1Vue的基础架构和谱法“春雨助农网站”关于我们、产品详情任务1：搭建开发环境并创建项目项目任务：完成创建“存雨助农”商城项目框架1 .掌握npm的安装：2 .掌握YSCode及相关插件的安装：3 .掌握浏览渊开发插件的安袋：4 .拿提使用npm命令创建项目:8任务2：导入静态素材资源4日任务；在Inain.js中杼入必要的样式和脚本I.掌握main.js中基础代码的含义：2.掌握资源导入与导出的语法：2任务3；f',5pp.VUC的temp1.ate标签攻目任务：利用静态页面素材实现关于我们视图I.掌握VtCmP1.atc标签的作用与语法：2任务4：使用axi。S请求服务器端json文件攻目任务：请求服务器然的产品数据1.掌握json的语法格式：2.常握I1.XiOS的ajax请求语法:3,掌提VM的生命周期函数：4任务5：实现Yue的数据展示项F1.任务；完成首页的产品列表功能I.使用data选项声明组件的响应式状态：2.掌握Vue的模板语法(文本插(ft、v-tcxt.v-htm1.v-for.v-bind)：4任务6：实现用户数据的输入攻目任务：完成产品洋情视181.掌握表单场入绑定模板指令v-modc1.：42学习情境2VUe的坦件开发“春雨助农网站”关于我们、产品列表组件任务7：实现组件的创建与调用项目任务：使用批件重构关于我们视图I.掌握组件的创建与调用：2.掌握组件的模板插槽：4任务8：实现父子组件间的数据传递项目任务:实现产品列表组件的产品搜索功能I.使用组件的methods选项定义函数；2 .通过props选项自定义组件属性：3 .掌捏监听事件模板指令won；4 .使用SCmi1.触发自定义事件；83学习情境3基于router库的SPA开发“春雨助农网站”产品洋情任务9：router的弓I入和配置项目任务：完成“春雨助农”项目路由友的过S1 .掌理MPA和SPA各自的特点：2 .掌握VUC-router库的安装：3 .TIEvuc-routcr的引入:4 .掌握跖由去的配以语法：4任务10：使用Route1.ink和RouteView项目任务，完成首页和关于我力两个视图间的切换1 .拿JSRoute1.ink的使用：2 .掌握RoutcV1CW的使用：4任务11：使用动态路由匹配项目任务：完成产品详情视图I.拿提路由参数的定义:2.掌弼路由参数的获取：44学习情境4基于pinia库的状态管理“春PH助农网站”产品详情任务12：定义Pinia的Store项目任务：实现注册与登录功能1.安理v-modc1.和>n指令的修饰符：2 .竽握Pinia用的安装和引入：3 .定义Pinia的Store；4任务13：订阅Pinia的状态更改原目任务：实现页头组件中登录成功后用户信息的显示、及用户注销1.使用Subscribe函数订阅状态更改：2.常提模板指令V-ShOw、v-if4任务M：定义Pinia的Action项目任务:完成的物车功能I.掌提定义Pinia的Ac1.ion的语法：2 .实现漆加购物车项和修改购物车项的数盘功能：3 .实现显示的物车数据：4 .实现计铝购物车总金翻：5 .实现脩改购物数届：8五、教学设计学习情境一，VUe的基础架构和语法项目名称：“春雨助农”网站学时：24教学目标1.掌握开发环境的搭建2 .掌握VUe+viIe项目的创建3 .掌握导入与导出的语法1.掌握temp1.ate）标签的作用与语法5 .掌握json的语法格式6 .掌握axios的ajax谙求语法7 .掌握VUe的生命周期函数8 .使用data选项声明组件的响应式状态9 .掌握YUe的模板语法（文本插值、V-IeX1、v-h1.m1.,v-for,v-bind）10 .掌握表单输入绑定模板指令"mode1.教学重点1 .掌握开发环境的搭建2 .掌握YUe+viIe项目的创建3 .掌据json的语法格式1.掌握axios的ajax请求语法5 .掌握vu。的生命周期函数6 .掌握VUe的模板语法（文本插值、v-text-v-htm1.>v-for,v-bind）7 .掌握表单.输入绑定模板指令v-modc1.学习难点1 .掌握VUe+vite项目的创建2 .掌握json的语法格式3 .掌握axios的Wax请求语法4 .掌握VUe的生命周期函数子任务主要教学内容任务1：搭建开发环境并创建项目1 .安装node,js及npm；2 .安装vseode及其vo1.ar插件3 .安装edge浏览器的devtoo1.s插件4 .使用npm命令创建vue+vite项目项目任务:完成创建“春雨助农”商城项目框架任务2：导入静态素材资源1.解析main,js中基础代码的含义2.掌握资源导入与导出的语法项目任务:在main,js中导人必要的样式和脚本任务3：编耳App.Vu。的<1.cmp1.aic>标卷I.解析temp1.ate标签的作用与语法项目任务：利用静态页面索材实现关干我们视图任务4：使用aioS请求服务器端json文件1 .掌握json的语法格式:2 .掌握axios的ajax请求讲法：3 .掌握VUe的生命周期函数项目仟务：请求服务器端的产品数据任务5：实现VUC的数据展示1.使用data选项泮明组件的响应式状态2拿翱VUC的模板语法（文本插值、V-Iextxv-ht三1.1.fOv-bind）项目任务:完成首页的产品列表功能任务6：实现用户数据的输入1.1.掌握表单输入绑定模板指令v-mode1.;项目任务：完成产品详情视图教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老如按照每个小组的完成情况对小组进行评分并总结。备注学习情境二，VUe的组件开发项目名称：“春雨助农”网站学时*12教学目标1 .掌握组件的创建与调用：2 .掌握组件的模板插槽：3 .使用组件的methods选项定义函数；4 .通过PmPS选项自定义组件属性：5 .掌握监听事件模板指令von：6 .使用Semi1.触发自定义千件：教学重点1 .掌握组件的创建与调用：2 .使用组件的methods选项定义函数：3 .通过props选项自定义殂件屈性：4 .使用Semit触发自定义事件：学习难点1 .掌握组件的创建与调用：2 .使用SCmit触发自定义事件:子任务主要教学内容任务7：实现祖件的创建与调用I.掌握组件的创建与调用：2.掌握组件的模板插梏；项目任务：使用组件电构关于我的视图任务8：实现父子组件间的数据传递I.使用组件的methods选项定义函数；2 .通过props选项自定义组件属性：3 .掌握监听事竹模板指令“on：4使用Semii触发自定义W件：项目任务：实现产品列表组件的产品搜索功能教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结0备注学习情境三，基于router库的SPA开发项目名称，“春雨助农”网站.学时：12教学目标1.掌握MPA和SPA各自的特点：2,握VUe-router旅的安装：3 .掌握vue-router的引入：4 .联樨路由表的配置谱法：5,握Routc1.ink的使用：6 .掌握RoUteView的使用：7 .掌握路由参数的定义：8 .掌提路由参数的换取：教学重点1 .掌握VUe-router的引入：2 .掌提路由我的配置语法：3 .掌握Route1.ink的使用；4洋掷RouteView的使用：5 .掌提路由参数的定义：6 .掌握路由多数的获取：学习难点I.掌握路由去的配建语法；2 .掌握路由参数的定义：3 .掌握路由参数的获取:子任务主要教学内容任务9：router的引入和配置1.掌握MPA和SPA各自的特点:2学提VUC-router库的安装：3,握vuc-routcr的引入：4.掌握跖由表的配制语法；项目任务:完成“春雨助农”项目路由表的配置任务Kh使用RQUte1.ink和RouteViev1 .掌押.Route1.ink的使用；2 .掌握R。UtCViCW的使用：项目任务：完成首页和关于我们两个视图间的切换任务H：使用动态路由兀配1 .掌捏路由参数的定义:2 .掌握露出参数的获取：项目任务：完成产品详情视图教学方法建议任务驱动方式组织教学内容，采用理实体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境四：基于Pinia率的状态管理项目名称：“存雨助农”网站学时：16教学目标1.学握v-modc1.和V5指令的修饰符:2 .掌押Pinia库的安装和引入：3 .定义Pinia的Store：4使用夬UbSCribC函数订阅状态更改:5 .常握模板指令V-Show4v-if6 .掌握定义Pinia的Action的语法：7 .实现添加的物车顶和修改购物车项的数状功能：8 .实现显示购物车数据：9 .实现计算的物车总金额：10 .实现偿改购物数限：教学重点I.掌理Pinia库的安装和引入：2,定义Pinia的SIorc：3 .使用JSUbMJribC函数订阅状态更改;4 .掌握定义PiniaAction的语法：学习难点MinHSsubscribe函数订阅状态更改；子任务主要教学内容任务12：定义Pinin的StoreI.掌握v-11ode1.和VWn指令的修饰符;2 .掌旌Pinia库的安装和引入：3 .定义PiniaMStore：项H任务：实现注册与赞录功能任务13；订阅Pinia的状态更改I,使用SSUbSCribe函数订阅状态更由2.常握模板指令V-ShoW、v-if项目任务：实现页头组件中登录成功后用户信息的显示、及用户注料任务14：定义PiniH的Action1 .掌握定义Pinia的Action的语法:2 .实现添加购物车顶和修改购物车项的散状功能：3 .实现显示购物车数据：4 .实现计獴购物车总金额：5.实现假通购物数盘：项目任务：完成购物乍功能教学方法建议以理论讲解、演示为主，学生按照教学内容进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结，采用任务驱动教学。备注六、实施建议（一）教材选用与编写根据专业人才培养方案和课程教学目标选用理论实践i体化或项目课程教材。推荐教材1.VUe.js前端开发实战（第2版），黑马程序员，人民邮电出版社，2023参考书：1. Vue.js前端开发实战教程北京：人民邮电出版社，20222. Vue.js设计与实现北京：人民邮电出版社，20223. 循序渐进Vue.js3前端开发实战北京：清华大学出版社，20224. wwn网站5. 网站（二）课程资源的开发与利用1 .开发课件、微课等教学资源：2 .选用符合教学要求的录像、课件、视频、资料文献等资源辅助教学；3,依托学校职教云教学平台进行课程资源建设。（三）教学基本条件1 .专业教师的要求（1）具有前端新知识、新技能的学习能力和创新创业能力：（2）具备前端架构设计能力；（3）具备移动端开发能力：（4）具备前端组件化能力：（5）具备网站性能优化能力（6）具仃较强的工作过程系统课程教学设计能力：（7）具有较强的行动导向教学组织与实施能力。2 .学习场地、设施的要求为保证项目、任务的实施与完成，本课程必须在实践理论一体化教室完成教学过程。（四）教学建议1 .本课程以实际的典型应用为基础构建学习我体，建议在每个学习情境的教学实施中，完全采用项目引导、任务驱动的行动导向教学,并以小组协作方式完成各项工作任务。2 .以Web项目的设计、实现作为驱动主线，实现理论实践体化教学。学生通过感性认识，理性思维，动手操作，完成Web项目的分析、设计、编码、调试和运行，在做中学，在学中做，最终达到真正听得蚀，学得会,做得好，切实提高动手能力和分析问题、解决问题的综合素质。3 .在教学过程中，要创设工作情景，同时应加大实践实操的容量，要索密结合职业技能等级证书的考证，加强考证的实操项目的训练,在实践实操过程中,使学生掌握前端应用程序应有的技能，提高学生的岗位适应能力。1.在教学过程中，要尽显应用多媒体、动画视频、演示等教学资源辅助教学，帮助学生理解相关概念。5 .在教学过程中，在教学过程中，美注软件产业发展新业态、新模式，对接新技术、新工艺、新规范发展趋势，贴近生产现场。为学生提供职业生涯发展的空间，努力培养学生参与社会实践的创新精神和职业能力。6 .教学过程中教师应积极引导学生提升职业素养，培养职业道德。七、教学评价（一）成绩构成本课程主要以过程考核为主，考核涵盖学习情境全过程，既评价学生专业能力，也评价学生交流沟通、团队协作、自主学习、问题的分析与处理等非专业能力，以促进学生绦合职业能力的养成。课程总评成绩=项目成绩（70%）+作业成绩（10）+芍勤（IOQ+课堂活动成绩（10%）（二）项目成绩评价指标项目总分100分，项目考核由指导教师对每个小组进行综合考核，考核内容分为三个部分：第部分是项目的设计和制作，占评价成绩的70斩第二部分是项目总结报告，占评价成绩的10¾,第三部分是团队合作和语言表达,占评价成绩10机第四部分是职业操守，占评价成绩的10具体考核标准见表2。表2项目考核标准考核内容（满分100分）评分占满分的100%80占满分的80¾60%占满分的60%以下“春雨助农”网站的设计与制作（70分）搭建开发环境并创建项目（10分）能够独立完成模块制作可以通过其他人帮助下，能够完成模块制作不能完成模块制作关于我们（5分）能够独立完成模块制作可以通过其他人帮助下，能矮完成模块制作不能完成模块制作产品列表（10分）能够独立完成模块制作可以通过其他人帮助下，能够完成模块制作不能完成模块制作产品搜索（10分）能够独立完成模块制作可以通过其他人帮助下，能锅完成模块制作不能完成模块制作产品详情（5分）能够独立完成模块制作可以通过其他人帮助下，能够完成模块制作不能完成模块制作路由配置（10分）能够独立完成模块制作可以通过其他人帮助下,能够完成模块制作不能完成模块制作注册登录（10分）能够独立完成模块制作可以通过其他人帮助下，能够完成模块制作不能完成模块制作购物车能够独立完成模块可以通过其他人帮不能完成模块制作（10分）制作助下，能够完成模块制作总结报告（10分）格式符合要求，内容完整正确格式基本符合要求，内容部分正确内容未写清楚团队合作和语言表达（10分）有很强的团队合作精神，在团队中起主要作用，能够清晰地表述项目实现原理有一定的团队合作精神,在团队中起次耍作用,能够表述项目实现原理没有团队合作意识，基本未发挥作用，问题表述不清楚职业操守QO分）代码规范、命名规范、有注释、代码格式清晰代码可读性不高代码比较混乱