前端开发 实战 大纲

《Vue.js3.0从入门到实践》课程教学大纲课程编号：学分：4学分学时：70学时（其中，讲授学时：48学时上机学时：22学时）先修课程：计算机基础网页设计基础与实战后续课程：无适用专业：软件工程及计算机相关的其他专业开课部门：计算机系一、课程的性质与目标《》可作为一门计算机科学与技术的实战教材，可用作专业拓展课或非计算机专业的选修课。本课程中内容覆盖全面、讲解详细，其中包括Vue.js简介、Vue.js环境搭建与项目创建、ECMAScript6语法、Vue.js的基本语法、事件处理与表单绑定的方法、组件的使用、CSS过渡与动画的实现、组合式API的使用、Vue工程化、VueRouter单页面开发、axios数据请求的使用、Vuex状态管理，最后通过农产品后台管理系统项目来巩固本教材中学习的大部分知识点。通过对本教材内容的学习，学生能够掌握Vue.js3.0框架的基础操作与核心概念，并且能够制作出更具交互性、界面更美观的前端应用程序。二、课程设计理念与思路需的能力和终身学习的能力，实现一站式教学理念。为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。三、教学条件要求开发工具：Vue.js3.0、VisualStudioCode1.67.0、vue-devtools四、课程的主要内容及基本要求第一章 Vue.js简介学习单元Vue.js简介学时2学习目标学习内容知识点了解掌握重点难点Web前端发展历程√MV*模式√√Vue的发展历程√Vue的生态系统√渐进式框架√√响应式系统√√前端框架对比√√Vue.js3.0的新变化√√第二章 Vue.js环境搭建与项目创建学习单元Vue.js环境搭建与项目创建学时3学习目标学习内容知识点了解掌握重点难点安装Vue.js√√Web前端开发工具√安装VSCode√√安装vue-devtools√√实训：创建第一个Vue.js程序√√√第三章 ECMAScript6语法学习单元ECMAScript6语法学时8学习目标了解ECMAScript6基本知识掌握块作用域构造与模板字符串的使用掌握ECMAScript6默认参数与rest参数的使用掌握展开运算符、解构赋值、箭头函数的使用掌握Symbol、Promise、Class的基本语法掌握Module模块与async函数的基本语法学习内容知识点了解掌握重点难点ECMAScript6介绍√let声明√√const声明√√模板字面量√√默认参数√√rest参数√√展开运算符√√解构的必要性√√对象解构√√数组解构√√箭头函数的基本语法√√箭头函数与this指向√√实验：用户信息页√√√Symbol的基本语法√√作为属性名的Symbol√√共享的Symbol√√Promise的基本语法√√Promise的生命周期√√Promise的原型方法√√Class√√Module模块√√async函数√√实训：商品订单页面√√√第四章 Vue的基本语法学习单元Vue的基本语法学时8学习目标掌握Vue应用程序实例的创建掌握插值语法、方法选项与指令的使用掌握计算属性与侦听器的使用掌握Class与Style绑定的使用理解Vue的生命周期钩子的执行原理学习内容知识点了解掌握重点难点创建应用程序实例√√文本插值√√原始HTML√√插值表达式√√实验：商品价格计算页面√√√方法选项√√指令参数√√内置指令√√自定义指令√√实验：商品信息管理表格√√√计算属性的定义√√计算属性的缓存√√计算属性选择性地渲染列表√√实验：购物车页面√√√侦听器√√绑定HTML样式（Class）√√绑定内联样式（Style）√√实验：斑马纹商品表√√√生命周期钩子√√实训：农产品后台管理系统√√√第五章事件处理与表单绑定学习单元事件处理与表单绑定学时6学习目标掌握Vue中事件处理的技巧掌握多个表单控件的双向数据绑定方法学习内容知识点了解掌握重点难点方法事件处理器√√内联事件处理器√√事件修饰符√√按键修饰符√其他修饰符√√实验：账户信息管理页面√√√单行文本输入框√√多行文本输入框√√复选框√√单选按钮√√选择框√√值绑定√√实验：用户注册页面√√√实训：新增商品页面√√√第六章组件学习单元组件学时6学习目标理解组件化开发的思想掌握两种常用的注册组件的方式掌握组件间通信的方法掌握插槽的基本用法掌握具名插槽与作用域插槽的使用方式掌握动态组件的使用方式学习内容知识点了解掌握重点难点组件化开发√全局注册√√局部注册√√父组件向子组件传递数据√√单向数据流√prop校验√√子组件向父组件传递数据√√插槽的基本用法√√为插槽指定默认内容√√具名插槽√√作用域插槽√√使用$root访问根组件实例√√使用$parent访问父组件实例√√使用$refs访问子组件实例或子元素√√依赖注入√√动态组件√√实训：商品详情页面√√√第七章过渡与动画学习单元过渡与动画学时学习目标熟悉过渡与动画的内置组件掌握基于CSS的过渡与动画的应用应用JavaScript钩子实现动画效果掌握Vue中元素间过渡的应用掌握Vue中列表过渡的应用学习内容知识点了解掌握重点难点过渡与动画的内置组件√CSS过渡√√CSS动画√√自定义过渡类名√√JavaScript钩子函数实现动画效果√√元素间过渡√√列表过渡√√实训：商品列表页面√√√第八章组合式API学习单元组合式API学时8学习目标理解组合式API的必要性掌握setup()函数的应用掌握ref()、reactive()、toRefs()与toRef()方法的应用掌握组合式API中的计算属性与侦听器的应用掌握组合式API中的依赖注入的应用掌握组合式API中的生命周期钩子的应用学习内容知识点了解掌握重点难点组合式API的必要性√setup()函数的特性√setup()函数的基本语法√√实验：用户信息展示页面√√√ref()方法√√reactive()方法√√实验：密保问题管理页面√√√toRefs()方法√√toRef()方法√√实验：销售额展示页面√√√computed()方法√√watchEffect()方法√√watch()方法√√实验：用户查询页面√√√provide()与inject()√√组合式API中的生命周期钩子√√实训：促销活动管理页面√√√第九章Vue工程化学习单元Vue工程化学时6学习目标掌握VueCLI工具的安装与使用掌握VueCLI中图形化工具的用法了解新一代前端构建工具Vite的使用了解Element-Plus组件库的使用学习内容知识点了解掌握重点难点VueCLI简介√VueCLI的环境配置√√安装VueCLI√√使用VueCLI创建项目√√项目结构分析√√实验：诗歌展示页面√√√新一代前端构建工具Vite√√安装ElementPlus√√使用ElementPlus组件√√实验：使用ElementPlus重构诗歌展示页面√√√实训：物流公司管理页面√√√第十章VueRouter单页面开发学习单元VueRouter单页面开发学时6学习目标理解路由的定义与分类掌握路由的安装与配置掌握嵌套路由、重定向与命名路由的用法掌握路由传参与编程式路由的用法掌握3种导航守卫与路由组合式API的用法学习内容知识点了解掌握重点难点初识路由√路由的安装与配置√√创建第一个路由项目√√嵌套路由√√重定向与命名路由√√路由传参√√编程式导航√√实验：重构农产品后台管理系统页面√√√导航守卫√√路由组合式API√√实训：蔬菜商品信息页面√√√第十一章axios数据请求学习单元axios数据请求学时4学习目标了解axios的特征、安装与引入方法掌握axios的常用请求方式、JSON数据的使用与跨域请求的实现掌握axios请求配置的用法掌握axios并发请求、创建axios实例与配置axios默认值的方法掌握拦截器的创建方法学习内容知识点了解掌握重点难点初识axios√√axios的常用请求方式√√请求JSON数据√√跨域请求数据√√axios配置对象√√配置对象的应用√√并发请求√√创建axios实例√√配置默认值√√axios拦截器√√实训：销售额查询页面√√√第十二章Vuex状态管理学习单元Vuex状态管理学时学习目标理解Vuex状态管理及其原理掌握Vuex的安装与配置理解Vuex的核心概念掌握Vuex与组合式API的结合使用学习内容知识点了解掌握重点难点Vuex的简述√单组件与多组件的状态管理√√Vuex的原理√√Vuex的安装与配置√√State√√Getters√√Mutations√√Actions√√Modules√√Vuex与组合式API√√实训：粮食信息列表页面√√√第十三章农产品后台管理系统学习单元农产品后台管理系统学时学习目标掌握农产品后台管理系统的环境搭建掌握农产品后台管理系统的设计与实现学习内容知识点了解掌握重点难点项目分析√环境搭建√√首页√√账户信息页面√√用户管理页面√√商品管理页面√√订单管理页面√√√物流公司管理页面√√√登录页面√√404页面√√路由配置√√六、考核模式与成绩评定办法绩（20%）。七、选用教材和主要参考书八、大纲说明的程序设计或验证。五、学时分配章目讲课上机合计第一章Vue.js简介202第二章Vue.js环境搭建与项目创建213第三章ECMAScr