Vue.js 超详细入门与项目实战（微课视频版）教学大纲

教学大纲课程名称Vue.js超详细入门与项目实战（微课视频版）课程编码1123013课程类型专业课课程性质必修课适用范围电商、经济、管理、金融等专业学分数3先修课程计算机应用基础学时数72实验/实践学时18课外学时无考核方式考试平时30%+实验10%+期末60%制订单位制订日期执笔者审核者课程的性质、目的与任务《Vue.js超详细入门与项目实战》是专业中一门综合性很强的基础课程，主要内容包括三个模块，第一部分讲解Vue3中数据绑定、事件绑定、组件、路由和接口的使用方法和应用技巧。第二部分讲述Vue3中第三方插件Pinia和VantUI实现过程和应用方法。第三部分介绍商城项目开发的内容，包括项目路由配置、首页、分类页、动态页、详细页和购物车及个人中心页的开发过程。笔者针对每个模块重要、实用的部分进行讲解，通过功能描述，实现代码，页面效果，源码分析等形式多方面展示各知识点的特性及功能，并将其与实际应用紧密联系，希望学生能够通过学习进一步深化对知识点的理解；同时，每个章节均提供了丰富的示例代码。本课程的目的与任务是使学生通过本课程的学习，从Vue3脚手架功能使用的方法的入手，由浅入深学习使用Vue3框架开发页面的各种相关知识，学会页面开发的相关关键技术，能够掌握常见的页面内容的研发技能，同时通过实践学习页面开发三种语言的基本功能与应用，以梳理知识脉络和要点的方式，让学生掌握前端页面开发的相关思想。本课程除要求学生掌握页面开发的基础知识和理论，重点要求学生学会分析问题的思想和方法，为更深入地学习和今后的实践打下良好的基础。二、教学目标与教学基本要求1.前端框架发展理解前端技术的发展和学习目的，掌握学习前端技术的方法，理解前后端分离的概念和优化方式。2.Vue脚手架功能理解和掌握最新版本VueCLI的功能，掌握VueCLI的安装方式和常用指令，掌握VueCLI编译和发布的方式。Vue数据绑定理解和掌握Vue中数据绑定原理，理解单向和双向数据绑定工作过程和原理，掌握绑定文本和指令绑定数据的方法。元素事件绑定理解和掌握Vue中数据绑定原理，理解单向和双向数据绑定工作过程和原理，掌握绑定文本和指令绑定数据的方法。元素动画效果理解和掌握过渡动画实现的方法和流程，理解自定义动画的工作过程和原理，掌握第三方动画库和列表动画实现的方法。组件理解和掌握定义组件的方法和流程，理解组件中属性的定义和使用原理，掌握组件中事件验证和传参的方法。组件传参理解和掌握父与子组件之间相互传参的方法，掌握两个独立组件之间相互传参的流程和方法，理解父子间组件slot方式传参的过程和原理。路由理解和掌握路由基本配置的方法和过程，掌握路由间传参和接收参数的方法，理解路由重定向和守卫配置方法和过程。接口理解和掌握axios对象安装的方法，掌握axios对象实例创建和配置的过程，理解掌握使用axios对象请求数据的方法。Pinia状态管理理解和掌握Pinia模块安装的方法，掌握Pinia对象实例创建和配置的过程，理解掌握Pinia各组成部分的构建和访问。VantUI理解和掌握Vant组件库安装和配置方法，掌握Vant基础、表单和业务类组件的使用，理解和掌握Vant其他核类组件的使用。项目开发前准备理解和掌握项目功能设计的方法，掌握项目开发的流程和配置过程，理解和掌握开发和发布打包的流程。项目路由配置理解和掌握路由的安装和配置方法，掌握路由中routes对象配置和传参的方法，理解和掌握路由中错误地址的处理方法。商城首页开发理解和掌握vant4中van-swipe组件的应用，掌握van-grid组件的布局过程和应用方法，掌握van-tabbar组件跳转和焦点获取方法。商品分类页开发理解和掌握vant4中van-search组件的应用，掌握van-sidebar组件的功能和应用方法，掌握和理解Vue3中父子组件相互传值的方法。商城动态页开发理解和掌握路由传参的方法和使用过程，掌握pinia中定义状态变量和方法的过程，掌握在组件中使用pinia定义的变量和方法。商品详细页开发理解和掌握van-action-sheet组件的使用方法，掌握van-action-sheet和van-tabs组件运用方法，理解并掌握在组件中使用pinia定义的变量和方法。购物车开发理解和掌握父子组件间相互传参的方法，掌握showConfirmDialog组件的使用方法，理解并掌握van-submit-bar组件的使用过程。个人中心页开发理解van-address-list组件使用的方法，理解并掌握van-address-edit组件的使用方法，理解并掌握全局状态和方法的使用过程。三、教学方法本课程教学方法以教师为主导的启发式讲授教学法为主，讨论（提问）式教学为辅，结合课外学习的教学方法。以学生动手为主，教师的启发式讲授教学法为辅，并结合讨论（提问）式教学，以及结合课外学习的教学方法。教学形式以讲授方式为主，多媒体PPT为辅助的教学方法。概念、定义和原理解释时，应通俗易懂，增加教学的直观性。教学过程中注意各个知识点的关联性，使学生更好地理解课程内容。对课程中关键性概念、设计思想方面的问题可辅以课堂讨论的形式。为强化学生写代码能力，每章课后应安排作业，帮助学生学习和应用。四、教学安排模块内容章节课时重点/难点第一个模块基础篇第1章前端框架发展2前后端分离概念第2章Vue脚手架功能2安装脚手架过程使用脚手架创建项目第3章Vue数据绑定2双向数据绑定进阶篇第4章元素事件绑定2事件传参第5章元素动画效果2第三方动画库列表动画第6章组件3组件属性组件事件第7章组件传参3组件之间传参slot传参扩展篇第8章路由3路由传参路由其他配置第9章接口2全局配置数据缓存第10章Pinia状态管理2Actions第11章VantUI2Vant业务组件第二个模块基础篇第12章项目开发前准备2功能设计第13章项目路由配置2配置路由对象第14章商城首页开发2底部导航条制作进阶功能第15章商品分类页开发2分类左侧导航第16章商城动态页开发2点赞与收藏功能第17章商品详细页开发2信息切换功能核心与扩展第18章购物车开发3增减购物车商品功能删除购物车商品功能第19章个人中心页开发3管理收货地址生成订单功能五、课程要求做好课前预习，预习时以教材为主，了解相关的概念、定义、原理。预习中认真思考，以便带着问题主动地听课。课后要复习，有余力的学生复习时还应多动手编写代码，加强代码理解能力，认真整理课堂听课笔记。要求学生课外自主学习，学生课外阅读的参考资料应围绕本课程的知识点和技术需求进行展开。认真完成第章节所布置的作业。六、考核内容及方式本课程成绩由平时成绩和期末考核成绩组合而成，课程成绩以百分制计算，分配比例如下：平时成绩占30%，主要考查作业的完成程度，理论课和实验课的出勤率，实验课