Vue 前端基础开发技术 标准

《Vue.js前端开发技术》课程标准一、课程信息概要课程名称Vue.js前端开发技术课程类型专业课课程性质R必修课□选修课课程学分4考核方式R考试□考查总学时64理论学时32实践学时32适用专业软件技术开设学期□一学期□二学期R三学期£四学期□五学期□六学期前序课程《网页设计与制作》《Web前端开发》二、课程性质与任务（一）课程性质《Vue.js前端开发技术》是软件技术专业的一门必修课程。课程主要讲解利用Vue.js框架进行Web前端组件化开发。通过本课程的讲解，让学生掌握如何使用Vue快速创建单页面应用，如何实现页面的交互效果以及购物车功能等。通过提供丰富的案例，让学生能够根据不同的业务需求开发出不同的功能，如组件过渡效果、购物车等，对于案例的实现思路进行了细致地分析和总结，让学生理解复杂案例的实现过程。本课程注重培养学生的逻辑思维能力，以及发现问题和解决问题的能力，为学生从事前端开发相关岗位工作打下良好的基础。课程对应的前端开发工程师岗位有着相对较高的薪酬水平和较为广阔的发展前景，可以为学生提供良好的职业预期发展。课程同时还要培养学生自主学习能力、自我管理能力、沟通能力、组织协调能力、市场开拓意识、竞争意识和团队协作精神，使学生既具备较高的业务素质，又具有良好的职业道德和敬业精神。（二）课程任务本课程教学基本要求是让学生理解Vue.js渐进式框架的核心概念，熟练掌握Vue.js前端项目开发基本流程、开发环境部署与配置、单页面应用项目目录结构定义等基础知识。掌握Vue.js基础语法、指令、组件开发、过渡与动画等关键概念；掌握使用VueRouter实现单页面内导航与路由设置，结合Vuex解决大中型Web前端项目数据共享问题，初步熟悉Vue特性,能够使用Vue.js解决简易的web前端项目。三、课程目标本课程的教学目标是让学生运用HTML5、CSS3、JavaScript熟悉地理解和掌握Vue.js核心概念和基础语法，掌握Vue指令、组件、过渡与动画等语法与使用方法。熟练地使得VueRouter来构建单页面导航并渲染路由组件。在中小型项目中使用Vuex解决多组件状态数据共享的问题。让学生使用VueCLI脚手架来搭建Vue项目，通过项目实训，培养学生具有开发含状态数据共享和路由导航功能于一体的中小型Web单页面的能力,适应目前Web前端工程师的岗位需要。具体目标如下：素质目标具有勤于思考、积极实践、有创造性、提高动手操作能力积极进取、勇于挑战、乐观与自信精神。公正坦诚、理解他人，尊重他人，乐于助人。诚实守信、言行一致、办事公道，诚实、可靠。知识目标了解Vue的核心设计思想。掌握Vue开发环境搭建。掌握Vue项目的创建。掌握Vue的实例、事件监听、组件及生命周期。掌握Vue提供的常用API。掌握Vue实例对象中的常用属性。掌握JavaScript钩子创建动画。了解vue-router的实现原理。熟练VuexAPI接口使用。了解全局环境变量与模式的配置及静态资源的处理。掌握服务器端渲染的基本实现。能力目标具备使用Vue快速创建单页面应用的能力。具备利用Vue.js框架进行Web前端组件化开发的能力具备独立学习，不断获取新的知识和技能的能力，能够在工作中寻求发现问题、解决问题的途径。具有理解大型软件开发的复杂性，具有能够用工程化的方法探索解决问题的能力。四、课程结构与内容课程结构课程内容模块任务教学内容单元一Vue简介1.了解网站交互方式

2.理解MVVM模式的基本原理

3.掌握Vuejs的安装方法

4.理解Vue.js的生命周期初始Vue.js网站交互方式MVVM模式Vue.js的定义Vue.js的安装方法Vue.js的生命周期单元二Vue开发基础1.掌握计算属性computed和监听器属性watch的用法

2.理解计算属性和监听器属性的使用场景计算属性computed监听器属性watch等内容单元三内置指令1.掌握Vue.js的常用内置指令的用法内置指令v-bindv-ifv-showv-forV-onv-model等指令单元四组件1.了解组件注册机制

2.掌握使用props进行父子组件传值

3.掌握组件通信的基本原理，包括父子组件通信、兄弟组件通信、组件链通信等场景

4.了解插槽的基本用法什么是组件组件注册机制template模板局部注册组件组件之间数据传递组件切换插槽的基本用法单元五Vue项目化1.掌握webpack的基本配置

2.了解webpack加载器与插件的配置

3.掌握使用webpack构建Vue.js应用的具体过程

4.了解npm常用命令webpack的安装与使用加载器Loaders插件Plugins单文件组件vue-loader单元六Vue路由1.了解vue-router的实现原理2.熟练路由的安装与使用3.掌握路由对象的常用属性4.掌握动态路由的匹配及路由嵌套5.掌握命名路由和命名视图的使用6.掌握编程式导航的实例方法掌握query和params传参方式使用vue-router基本使用路由对象属性query方式传参params方式传参嵌套路由命名路由单元七Vuex状态管理1.了解状态管理的应用场景

2.掌握Vuex的安装与基本应用

3.掌握Vuex的核心概念什么是VuexVuex状态管理模式actionsmutationsgettersmodulespluginsdevtools模块注册状态替换单元八Vue技术综合应用1.掌握基于VueCLI构建工具的Vue.js前端应用开发的流程、方法以及技术栈

2.掌握基于Vite构建工具的Vue.js前端应用开发的流程、方法以及技术栈

3.熟练撰写设计文档如何使用VueCLI、Vite等前端开发与构建工具开发一个Vue前端应用Vue、VueRouter、ElementPlus、webpack等前端技术综合运用五、学生考核与评价本课程考核采用平时成绩与期末考试相结合的方式，其中平时成绩占总分的40%，实践考核成绩占总分的60%,课程总成绩为百分制，60分以上（包括60分）算合格。1.平时成绩考核内容评分标准平时成绩占40%，考核内容及标准如下：序号考评项目考核内容及标准考评方法分值1学习态度上课听讲和回答问题情况，主动开展自我学习情况教师评定10分2组织纪律缺勤一次扣1分，3次迟到（或早退）按一次缺勤计算，其他违纪酌情扣分教师评定30分3课堂表现积极参加讨论，主动提问或回答问题，乐于帮助他人有效学习教师及组长组长评定15分4环境意识爱护实训室设备，未出现设备损坏，保持环境卫生教师及组长评定5分5平时作业平时作业提交及时性和完成度。教师评定40分合计100分2.期末考试考核内容及评分标准实践考核成绩占总成绩60%，考核内容及标准如下：序号考评项目考核内容考核标准分值1Vue.js框架理论知识Vue.js的安装、开发工具使用基础特性条件判断与列表渲染计算属性与监听属性样式绑定、事件处理表单控件绑定自定义指令组件过渡应用vue-router实现路由、应用axios实现Ajax请求单页Web应用状态管理1.能够正确理解2.能够正确描述40分2Vue.js框架实战应用开发基于vue-cli创建工程化的Vue项目基于element-ui组件库快速实现项目布局用户注册与登录的业务解决方案使用Vuex管理全局共享的数据使用axios实现前后端的数据交互6.基于vant组件库快速构建移动端界面1.能够掌握element-ui组件库的运用2.能够掌握axios以及拦截器的应用3.能够掌握Vuex管理全局状态的技术解决方案4.能够熟练使vue-router管理组件的切换展示5.掌握element-ui中如何自定义表单的校验规则6.掌握Vant组件库的运用60分合计=sum(above)100分六、教学实施与保障教学要求及建议（1）本课程教学采用任务驱动、理论实践一体化的教学模式开展教学，将理论教学内容与实践教学内容融为一体。（2）本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。（3）在本课程整个教学过程中的每一个学习情境都围绕着开发一个实用性的功能页面任务展开，该任务囊括了该学习情境所有的知识点，也融入了许多实际应用中常用的技能和技巧，在整个教学过程中，工作任务、演示案例、实训内容应围绕着该任务进行。（4）本课程采用“任务驱动，案例演示，教学做一体化法”的教学模式开展教学。教学中以学生为中心，教师全程负责传授技能，答疑解惑，控制教学进度，指导任务完成，实现教学目标。授课教师要求（1）课程负责人应具备丰富的软件技术专业核心课程教学经验，以及丰富的软件项目开发的实际经验。熟悉高职学生的学习及认知规律，具备深厚的职业教育教学理论基础。（2）教学团队由专、兼职教师组成，团队教师应达3人以上，担任本课程的主讲教师应该精通Vue框架，熟练使用VSCode编辑工具。具有应用Vue框架技术进行web设计开发的能力。（3）担任本课程的主讲教师具备较丰富的教学经验、课堂组织能力和较强的责任心。教材编写及选用课程资源开发及利用序号平台名称平台地址备注12教学场所及设施设备1．硬件配置CPU：Inteli5及以上内存：4GB以上显卡：支持DirectX9128M及以上硬盘：16G以上(主分区，NTFS格式)显示器：支持分辨率1024X768像素及以上2．软件配置操作系统：Windows