PAGE2/NUMPAGES2
《前端框架》课程标准
课程名称：前端框架
课程代码：3250624
适用专业：计算机网络技术（网络互动媒体开发方向）
专业课程性质：专业必修课
学时：64学时（理论：32实践：32）
学分：4学分
一、课程概述
（一）课程的地位和任务
本课程是计算机网络技术（网络互动媒体开发方向）的一门专业核心课程，是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
本课程的任务是培养学生Web前端开发工程实践能力，学生通过前端框架实践，积累解决实际问题的工作经验，为从Web前端开发相关工作奠定坚实的基础。同时，借助思政案例库的资源灌输规范操作的职业操守。课程对学生的职业能力培养和职业综合素质培养方面起重要支撑作用。
（二）课程设计思路
本课程基于讲授和实践操作的授课方式来学习课程内容，以行动为导向进行教学内容设计，以学生为主体，以理论讲解加案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。在案例驱动教学中，运用典型案例，将学生带入特定事件的现场进行案例分析，通过学生的独立思考或集体协作，进一步提高其识别、分析和解决某一具体问题的能力。同时，通过把抽象的原理和代码具体化，展示在实际案例项目中，增进学习兴趣和动力，恰当地掌握所学知识的含义和意义，并利用思政案例资源库将职业素养的培养贯穿于课堂。
二、培养目标与要求
（一）总体目标与要求
本课程的教学目标是通过该课程的学习，使学生掌握基于Vue框架的网站开发技能，并能熟练应用于中小型动态网站的建设中，在项目实践中提高学生的动手能力和创新能力。具体地说，在已了解关于HTML、CSS和JavaScript的知识基础上，过尽可能简单的API实现响应的数据绑定和组合的视图组件。
在教学过程中，注重使学生养成善于观察、独立思考的习惯，同时通过教学过程中的实际开发过程的规范要求强化学生的职业道德意识和职业素质养成意识，加强学生的思政教育，将思政融入内化素养。为学生以后从事更专业化的软件开发工作奠定基础。
（二）具体目标与要求
1、素质
（1）培养学生良好的动手实践习惯；
（2）培养学生规范、优化的程序代码；
（3）培养学生的业务逻辑分析能力；
（4）培养学生良好的自我表现、与人沟通能力
（5）培养学生良好团队合作精神。
2、知识
（1）掌握Vue数据绑定；
（2）熟练掌握Vue事件，Vue组件，Vue生命周期；
（3）熟练掌握全局API，全局配置；
（4）熟练掌握Vue过渡和动画；
（5）掌握Vue状态管理Vue路由；
（6）熟练掌握开发环境，服务器渲染；
（7）熟练掌握“微商城”项目。
3、能力
（1）能理解Vue设计思想和开发流程；
（2）具备开发环境配置能力；
（3）具备项目搭建能力；
（4）熟练掌握Vue项目开发全流程。
三、课程结构与内容及进程安排
（一）课程内容及进程安排
学习任务（项目）描述、内容进程安排、要求及学时分配见表1：
表1课程教学内容表及进程表
序号
学习任务（项目）
子任务（项目）
教学内容
课时数（理论/实践）
目标与要求
（知识点、能力点、素质点）
教学方式
（教学方法、教学手
段）
教学
场地
1
Vue简单入门
1.Vue开发环境
2.webpack打包工具
1．什么是Vue
2．Vue的下载和引入
1/1
知识点：1.了解Vue2．对Vue下载和引入
素质点：自我学习、自我管理
讲解+演示+练习
实训室
2
Vue开发基础
Vue开发基础（上）
Vue实例
Vue数据绑定Vue事件
Vue组件
Vue生命周期
2/2
知识点：创建Vue实例，掌握Vue数据绑定掌握Vue事件和，Vue组件掌握Vue生命周期
技能点：Git的使用
素质点：自我学习、自我管理、编码规范
讲解+演示+练习
实训室
Vue开发基础（下）
熟练掌握全局API
全局配置
2/2
知识点：熟练
掌握全局API；
技能点：学会全局配置
素质点：自我学习、自我管
理、编码规范
讲解+演示+练习
实训室
3
Vue过渡和动画
1.过渡和动画基础
2.多个元素过渡
什么是过渡和动画transition组件
Vue结合Velocity.js
实现动画
多个元素过渡模式
2/2
知识点：掌握Vue创建动画和过渡
技能点：编写
Vue代码
素质点：自我学习、自我管理、编码规范
讲解+演示+练习
实训室
1.多个组件过渡
2.列表过渡
多个组件过渡
列表过渡
1/1
知识点：掌握Vue创建动画和过渡
技能点：编写
Vue代码
素质点