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

教学大纲

课程名称

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组件使用的方法，理解并