《Vue.js 3.x从入门到实战》 陈恒 教学大纲.docx

«Vue. js 3. x从入门到实战教学大纲课程名称（中/英）：Vue.js 前端开发框架技术 /Vue.js Front-end Development Framework Technology学分：2总学时:48理论学时：24实验学时：24 （含实战）课程类别：专业课开课学期：2适用专业：软件工程、计算机科学与技术课程性质：必修课先修课程：HTML + CSS + JavaScript一、课程简介Vue.js是目前流行的三大前端框架之一。课程以Vue.js 3为基础，重点讲解 Vue.js的生产环境、开发工具、基础语法及生态系统，为学生搭建起通向“企业 级应用前端开发”的桥梁和纽带，为学生在前端开发领域“深耕细作”奠定基础、 指明方向。课程将系统地讲授计算属性、监听器、内置指令、组件、过渡与动画、 自定义指令、渲染函数、响应性与组合API、webpackVue Router> Vuex、Vue UI组件库等基础知识，并使用Vite、Vue CLI等前端开发与构建工具开发一个 Vue.js前端应用电子商务平台，为大型项目的前端开发打下坚实基础。二、课程目标（1）知识目标课程目标1:理解Vue.js的基础知识及框架原理；课程目标2：掌握基于Vue.js前端开发的主要过程、步骤和方法，针对企业 级应用前端开发的实际问题，总结提炼相关的系统架构；课程目标3：熟练使用VSCode、Vite、Vue CLI等开发与构建工具，构建基 于Vue.js的前端应用开发；课程目标4：撰写“Vue.js前端开发框架技术”课程作业、实验报告，能够 查找和阅读Vue.js前端开发框架方面的国内外文献资料。（2）能力目标课程目标5:注重培养实践与实战能力，掌握基本的Vue.js前端开发框架创 新方法和应用解决方案；课程目标6:研究与Vue.js前端开发框架相关的前沿理论与框架发展新动向， 能够结合大数据、云计算等新兴技术，拓展面向新兴行业的前端系统整合开发；课程目标7:培养学生树立正确的思想意识，专业课程融入“思政教育”。了 解企业级应用前端开发过程中有关国家的经济、环境、法律、安全、健康、伦理 等政策和制约因素；课程目标8:面向新工科建设，了解前端工程管理原理与经济决策方法，并 能在企业级应用前端开发中进行应用；课程目标9:通过团体协作，小组讨论、翻转课堂等课程教学模式设置，使 学生积极承担个体、团队成员以及负责人的多种角色；课程目标10:具有自主学习和终身学习的意识，不断学习Vue.js前端开发框架相关知识，适应新的发展领域。（3）课程目标与毕业要求的关系毕业要求指标点具体内容对应课程目标1.专业知识：具有独立获取知识、提出问题、分析问题和解决问题的 基本能力及开拓创新的精神。2、 4、 5、 62.问题分析与设计解决方案：掌握Vue.js前端开发框架的基本理论、 基本知识和基础方法。1、2、33.思政培养：具有人文社会科学素养、社会责任感，能够在实践与实 战中理解并遵守工程职业道德和规范，履行责任。7、8、94.自主学习能力：具有较强的自学能力、一定的前端工程设计能力、 分析解决前端工程实际问题能力。6、105.沟通：能够就企业级应用前端开发方面问题与业界同行及社会公众 进行有效沟通和交流。4、8、96.使用现代工具：具有较强的前端系统整合开发能力，能够运用软件 工具进行前端工程项目的需求分析、设计、实现、测试、维护等工 作。37.项目管理：理解并掌握前端工程管理原理与经济决策方法，并能在 多学科环境中应用。4、 5、 6、 88.终身学习：具有自主学习和终身学习的意识，有不断学习和适应发 展的能力。10（4）教学内容安排总体思路由Vue.js基础入门到项目案例实战，具体内容安排顺序：Vue.js 3基础知识 （计算属性、监听器、内置指令、组件、过渡与动画、自定义指令、渲染函数、 响应性与组合 API、webpack） > Vue.js 3 进阶知识（Vue Router> Vuex、Vue UI 组件库）一项目案例实战（电子商务平台的前端设计与实现）。三、教学内容及基本要求序 号教学内容教学要求总学时96对应课程 目标讲 课实 验实 战1初始Vue.js,包括网站交 互方式、MVVM模式、 Vue.js的定义、Vue.js的安 装方法以及Vue.js的生命 周期等内容1 .了解网站交互方式2 .理解MVVM模式的基本原理3 .掌握Vue.js的安装方法4 .理解Vue.js的生命周期1001、2、 52计算属性和监听器，包括1.掌握计算属性computed和监1101、2、计算属性computed以及监听器属性watch等内容听器属性watch的用法2 .理解计算属性和监听器属性 的使用场景3 .熟练撰写实脸报告3、4、 53内置指令，包括v-bind、 v-if> v-show> v-for v-on> v-model等指令1 .掌握Vue.js的常用内置指令的 用法2 .熟练撰写实验报告1201、2、3、4、54组件，包括组件注册、组 件通信、插槽、动态与异 步组件等内容1 .了解组件注册机制2 .掌握使用props进行父子组件 传值3 .掌握组件通信的基本原理，包 括父子组件通信、兄弟组件通信、 组件链通信等场景4 .了解插槽的基本用法5 .了解动态与异步组件的实现方 法6 .熟练撰写实验报告4201、2、3、4、5、6、105过渡与动画，包括单元素/ 组件过渡、多元素/组件过 渡以及列表过渡等内容1 .掌握单元素/组件过渡的实现方 式2 .掌握多元素/组件过渡的实现方 式3 .掌握列表过渡的实现方式1001、2、3、4、56自定义指令，包括自定义 指令的注册机制、自定义 指令的实现原理、自定义 指令实战等内容1 .掌握自定义指令的使用方法2 .理解自定义指令的实现原理3 .理解自定义指令的注册机制1001、2、3、4、 57渲染函数，包括DOM树 的基本概念、渲染函数的 基本原理、h()函数的基本 用法等内容1 .掌握渲染函数的用法2 .理解渲染函数的原理1001、2、 3、4、58组合API与响应性，包括 响应性的概念及原理、组 合API的原理、setup组件 选项、提供/注入、模板引 用、响应式计算与侦听等 内容1 .掌握setup函数的用法2 .理解响应性原理与组合API思 想3 .理解响应式计算与侦听原理2001、2、3、4、5、89使用 webpack ,包括 webpack的安装与使用、 加载器Loaders与插件 Plugins、单文件组件与 vue-loader 等内容1 .掌握webpack的基本配置2 .了解webpack加载器与插件的 配置3 .掌握使用webpack构建Vue.js 应用的具体过程4 .了解npm常用命令2001、2、3、4、5、610Vue Router ,包括 Vue Router 的安装、Vue Router 的基本用法、Vue Router 高级应用、路由钩子函数、1 .掌握如何使用VueCLI脚手架 搭建Vue.js项目2 .掌握Vue Router的基本用法、 高级应用以及路由钩子函数的使4201、2、3、4、5、6、7、8路由元信息等内容用3 .了解网络安全机制4 .了解国家网络安全战略5 .熟练撰写实脸报告11Vucx,包括状态管理与应 用场景、Vuex的安装与基 本应用、Vuex的核心概念 等内容1 .了解网络安全机制2 .了解国家网络安全战略3 .了解状态管理的应用场景4 .掌握Vuex的安装与基本应用5 .掌握Vuex的核心概念2001、2、3、4、5、6、7、812Vuc UI组件库，包括setup 语法糖、Element Plus、 View UI Plus、Vant Uk 其 他UI组件库等内容1 .掌握setup语法糖的使用方法2 .了 解 Element Plus、View UI Phis、Vant等UI组件库的使用方 法4001、2、3、4、5、6、8、1013电子商务平台的前端设计 与实现，讲述如何使用 Vue CLI、Vite等前端开发 与构建工具开发一个Vue 前端应用，其中主要涉及 的技术包括Vue、Vue Router、Element Plus、 wcbpack 、 Vite 、 WcbStoragc等前端技术1 .掌握基于Vue CLI构建工具的 Vue.js前端应用开发的流程、方 法以及技术栈2 .掌握基于Vi（e构建工具的 Vue.js前端应用开发的流程、方 法以及技术栈3 .熟练撰写设计文档0502、3、4、5、6、7、8、1014分组（1-2人）设计并实 现一个基于Vue.js 3 + Vue UI组件库的前端应用系 统1 .掌握基于Vue CLI构建工具的 Vue.js前端应用开发的流程、方 法以及技术栈2 .掌握基于Vite构建工具的 Vue.js前端应用开发的流程、方 法以及技术栈3 .熟练撰写设计文档4 .加强团队协作，积极承担团队 成员与负责人的多种角色00122、3、4、5、6、7、8、9、10合计241212四、教学安排及教学方式（1）教学安排总学时48学时，其中，讲授24学时，实脸（上机）16学时（见Vue.js 前端开发框架技术实验教学大纲），案例实战8学时（见Vue.js前端开发框 架技术课程实训资源）。（2）教学方式线上线下混合式教学，以课堂教学为主，辅以适当的线上学习、课堂提问、 讨论、实验、实践、实战来强化学生对Vue.js前端开发框架技术的主要概念、基 本原理、基本方法的理解与认识，以上机实验、案例综合实战与习题练习使学生 充分认识到Vue.js前端开发框架技术在企业级应用前端开发的重要地位，通过上 述教学活动来实现对学生理论联系实际解决复杂问题能力的培养。讲授环节主要采用教师讲解、演示、互动的教学形式。教师讲解知识点、演 示程序代码，使学生对知识点形成直观印象，并通过课堂教学双方互相提问，与 学生互动，鼓励学生在课堂上发表自己的见解，加深对知识点的理解，达到课程 目标。实验环节主要采用教师安排任务、学生自主上机练习，教师现场指导、答疑 的形式。上机练习可利用实验室电脑或学生个人电脑编程，通过安装在本地的 IDE进行上机练习。案例实战环节主要采用学生自主实战项目案例，教师线上线下指导、答疑的 形式。项目案例实战利用学生个人电脑编程，通过安装在本地的IDE进行实战。五、考核方式与成绩评定办法考试成绩由平时成绩和期末成绩两部分构成。平时成绩占总成绩的40%,期 末成绩占总成绩的60%,具体评分标准见下表。（1）平时成绩由课堂出勤表现、 上机实脸（实战）、出勤成绩按相应的比例折算并相加后得出。（2）期末成绩由 项目报告和期末项目答辩成绩折算得出。考核方式及成绩占比为:序号成绩构成考核方式占比1平时成绩课堂表现10%2上机实验（实战）20%3出勤10%4期末成绮项目报告10%5期末项目答辩50%合计100%评价标准：（1）课堂表现课堂表现可通过回答问题、分组讨论、演讲汇报等方式进行考核，按照百分制评分，总评后按照10%进行折算。评分标准为:观测点评分80-100 分60-79 分40-59 分1-39 分。分回答问题、参 与讨论或汇 报情况（权重 0.4）积极主动回 答问题、参 与讨论或做 汇报能够被动回答 问题、参与讨 论或做汇报勉强能回答问 题、参与讨论 或做汇报不能正常地 回答问题、参 与讨论或做 汇报不能回答问 题、参与讨 论或做汇报资料查阅、知 识运用情况 （权重0.3）熟练查阅全 部资料、运 用相关知识基本做到资料 的查阅、知识 的运用能做到部分资 料的查阅、部 分知识的运用不能做到资 料的查阅、知 识的运用观点和想法 的表达（权重观点和想法 清晰、合理，观点和想法比 较明确，具有观点和想法比 较明确，但合没有明确的 观点和想法0.3)逻辑性好一定的合理 性、逻辑性理性、逻辑性 不足（2）上机实验（实战）上机实脸（实战）环节按照百分制评分，然后按照20%进行折算。评分标准为：观测点评分80-100 分60-79 分40-59 分139分0分实脸（实 践、实战） 预习报告 （权重0.2）按时完成，业务 逻辑合理，内容 完整；能积极、 正确回答教师 提出的问题按时完成，业 务逻辑基本合 理；能正确回 答教师提出的 问题延时完成，业务 逻辑基本合理； 勉强能回答教 师提出的问题后期补交，内 容不完整，不 能辨识；不能 回答教师提出 的问题未提交实脸（实 践、实战） 操作（权 重 0.4）操作IDE熟练， 操作方法正确， 实验效果合理操作IDE不够 熟练，有少量 错误但不违法 安全规程，实 验效果合理操作IDE生疏， 操作有错误但 不违法安全规 程，能够得出实 脸效果操作生疏，未 能完成实脸， 未能得出实睑 效果缺席或 违反安 全规程实睑（实 践、实战） 总结报告（权重 0.4）按时完成，内容 全面；按时完成，内 容基本完整延时完成，内容 基本完整后期补交，内 容不完整未提交（3）出勤出勤按照百分制评分，然后按照10%进行折算。评分标准为：满分100,旷课1次扣5分，请事假1次扣3分，请病假1次扣2分，迟到1次扣2分，早退1次扣2分。（4）项目报告项目报告按照百分制评分，然后按照10%进行折算。评分标准为:观测 点评分80-100 分60-79 分40-59 分1-39 分0分项目 报告 撰写文字通顺，逻 辑性好，结构 合理，数据库 设计合理，功 能模块实现完 整文字通顺，逻 揖性较好，结 构合理，数据 库设计合理， 功能模块实现 完整，但抄袭 较多文字基本通 顺，逻辑性一 般，结构有不 合理部分，数 据库设计不合 理，功能模块 实现不完整， 抄袭较多文字不够通 顺，逻辑性差， 结构一般，抄 袭较多，无自 己实现的模块未提交（5）期末项目答辩期末项目答辩采用百分制评分，总评后按照50%进行折算。评分标准为:指标分值分值分配/ 分值分档指标分配备注完成质量20分档1:1020 分项目业务逻辑合理，网站功能齐全，页面视 觉美观。按照项目整体结构和 个人完成部分质量情 况，按个人给分。（注： 项目中的成员成绩不 同）分档2:510 分项目业务逻辑基本合理，网站功能基本齐全， 页面有美化。分档3:1-5业务逻辑简单，页面简陋，项目功能不完整。分档4:0分不是由个人独立完成：。分。工作量30分档1：30分个人工作量完成项目中组员的平均工作量。 （注：整个项目由1人独立完成，可以考虑 额外多加10分，注：如果最后总分超过100, 则以100处理。）注：1 .要求项目业务逻辑 功能实现合理。如果 项目功能不齐全或功 能不合理，则酌情扣 分。2 .不满足备注中的项 目要求一条：小组扣 4分。分档2:15-30 分个人工作量完成超过到平均工作量的1/2,具 体由答辩老师按照完成量酌情给分。分档3: 15分个人工作量完成项目中组员的平均工作量的 l/2o分档4:0-15 分个人工作量完成不到平均工作量的1/2,具体 由答辩老师按照完成量酌情给分。分档5:0分项目中没有个人独立完成的部分：0分。注：经答辩老师确认个人工作量不是本人完成答辩50分档1：4050 分能准确流利地回答5个难度适宜的问题以 上，回答问题时思路清晰，言简意赅，重点 突出，准确无误。分档2:3040 分能准确流利地回答3个难度适宜的问题以 上，回答问题时思路清晰，言简意赅，重点 突出，准确无误。分档3:2030 分能准确流利地回答1个难度适宜的问题以 上，回答问题时思路清晰，言简意赅，重点 突出，准确无误。分档4:020 分回答问题时思路混乱，重点不够突出，表达 不够准确，错误百出。六、教材及其他教学资源（1）使用教材 川陈恒.Vue.js 3.X从入门到实战(微课视频版).北京：清华大学出版社,2023.(2)主要参考书川陈恒.SSM + Spring Boot + Vue.js 3全栈开发从入门到实战(微课视频版). 北京：清华大学出版社,2022.七、说明本课程的先修课程为HTML + CSS + JavaScript和Java语言程序设计， 后续课程为Java EE框架全栈开发。八、课程思政内容(1)培养学生的创新精神与创新意识。党的二十大报告指出，“教育、科技、 人才是全面建设社会主义现代化国家的基础性、战略性支撑。必须坚持科技是第 一生产力、人才是第一资源、创新是第一动力，深入实施科教兴国战略、人才强 国战略、创新驱动发展战略，开辟发展新领域新赛道，不断塑造发展新动能新优 势。''在当今激烈的竞争环境下，注重和加强学生创新精神和创新意识的培育是 课程的极其重要内容。(2)培养学生民族认同感，树立远大职业理想。梳理国产操作系统的发展 历史与现状，包括华为、中兴等国产企业在全球市场的崛起，在操作系统领域的 新架构，向学生展示中国的信息技术领域成就，增强使命感与荣誉感；通过华为 孟晚舟事件、美国的芯片垄断一引出：民族认同感。党的十八届五中全会通过的 “十三五”规划建议，明确提出实施网络强国战略以及与之密切相关的“互 联网+ ”行动计划。国家正着力实现关键技术自主可控，为维护国家安全、网络 安全提供技术保障。中国信息化需求巨大，但在一些关键技术领域如操作系统、 芯片技术、CPU技术等方面，还难以做到自主可控，对国家安全造成威胁。引 导学生明确：建设网络强国，不仅仅是靠网络技术，还要有软件技术等其他各类 技术的支撑。引导学生作为软件技术专业的一员，应更加明晰专业人才的培养目 标，更加明确专业领域内工作岗位和工作内容的社会价值，自觉树立远大职业理 想，将职业生涯、职业发展脉络与国家发展的历史进程融合起来。(3)向学生介绍中国在人工智能领域的布局，重点分析当代人工智能下软 件技术如何支撑中国制造的智能化发展；(4)通过专业知识的学习，引导学生深刻理解与认识所学软件开发知识对 于国家信息产业发展、智慧城市建设、大数据智能信息处理等各方面的重要意义， 使学生在学习过程中逐渐树立专业荣誉感；(5)培养学生精益求精、工匠精神。告诉学生在学好软件技术之后，走上 工作岗位会成为程序员、软件系统运维人员、软件测试员、售前售后服务人员等。 在这些职位岗位上，要发挥工匠精神，精益求精地将程序开发、系统运维、程序 测试、需求分析及技术问题处理等工作内容完成好，保证软件系统运行时正确、 稳定，保证客户的需求被精确采集和纳入软件开发计划，保证软件运行时遇到问 题能被及时解决。引导学生在学习时，将知识夯实、精技强能，方能在今后工作 中本领过硬，不出批漏，工作成果令用户满意。引导学生认识到，作为职业人， 其专注、敬业、责任担当对完成好本职工作，进而促进软件行业整体的高水平、 优质化发展具有重要意义。(6)培养学生团结协作，合作共嬴的精神。通过实践项目、竞赛等，告诉 学生今天的社会无论什么行业想要做出一番成就，靠一个人打拼已经不现实了。 所谓人多力量大，三个臭皮匠顶个诸葛亮.强调团队成员之间的资源共享、 协同合作精神，团队成员在一个项目中要各司其职，每个人发挥自己的特长完成 分配的任务，最终才能高质量、有效率地完成项目，从而形成更强大而持久的生 产力和创造力。