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

《前端开发框架》课程标准

课程名称：前端开发框架

适用专业：软件技术

课程学分：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