Vue 3基础入门 教学大纲

《Vue3基础入门（第二版）》教学大纲一、课程基本信息1.课程名称：Vue3基础入门2.教材：清华大学出版社《Vue3基础入门》第二版3.适用专业：计算机应用、软件技术、大数据、前端开发等专业4.课程定位：前端核心实操课程，零基础掌握Vue3框架，可完成企业级H5综合项目，衔接Vue生态（路由、状态管理、网络请求、工程化）5.教学目标知识目标：掌握Web前端发展脉络、Vue3核心语法、指令、组件、路由、Vuex、axios、项目工程化部署；能力目标：独立开发单页面SPA应用，完成组件封装、接口交互、页面路由、全局状态管理；素养目标：培养工程化开发思维、模块化复用思想、前后端分离开发规范。二、课程整体课时分配（总建议64课时：理论32+实操32）章节章节名称理论课时实操课时核心教学任务第1章Web前端发展与Vue.js简介22搭建开发环境，理解前端发展与Vue3优势第2章HelloWord与Vue3基础特性22掌握Vue3实例、生命周期、插值语法，实现登录页面第3章Vue基本指令44全套内置指令、自定义指令开发，注册页面案例第4章样式绑定22class/style动态绑定，奇偶行表格实战第5章组件应用44组件通信、插槽、日历/弹窗组件封装第6章组件复用22render渲染函数、mixin混入、插件封装复用第7章Vue路由VueRouter422路由配置、导航守卫、动态路由、懒加载第8章axios异步请求22网络请求、请求/响应拦截、跨域处理第9章VueCLI项目工程化22脚手架创建、webpack配置、打包部署第10章Vuex状态管理22state/getter/mutation/action/模块化第11章红色旅游App综合项目86全栈SPA综合实战（整合全部知识点）第12章Vue3项目部署02打包dist、服务器部署方案三、分章节详细教学大纲第1章Web前端发展与Vue.js简介（理论2h+实操2h）1.教学重难点重点：前端技术演进、Vue3八大新特性、环境搭建（VSCode+Node+Vue三种安装方式）难点：区分Vue2与Vue3底层差异、npm包管理基础2.理论教学内容1.1Web前端发展历史1.1.1前端诞生：B/S架构、初代静态网页1.1.2动态网页：JS诞生、PHP/JSP服务端渲染优缺点1.1.3前端框架迭代：jQuery→MVC→React/Vue/Angular三足鼎立1.2Vue框架介绍1.2.1Vue3定义：渐进式MVVM框架1.2.2Vue3八大核心升级（Proxy响应式、CompositionAPI、多根节点、TS重构等）1.2.3Vue3五大核心优势1.3开发工具VSCode安装与插件配置（中文、Vetur）1.4Node.js环境安装、版本管理、npm基础命令1.5Vue3四种安装方式：独立文件、CDN、npm、脚手架1.6章节总结3.实操实训任务1.安装VSCode并配置Vue开发插件；2.安装LTS版Node.js，验证node/npm版本；3.CDN方式引入Vue3，编写第一个HelloVue页面；4.区分哈希/CDN本地引入两种方式的使用场景。4.课后习题教材习题1全部完成，整理Vue2与Vue3差异对照表第2章HelloWord与Vue3基础特性（理论2h+实操2h）1.教学重难点重点：createApp创建实例、八大生命周期钩子、文本插值、JS表达式难点：生命周期执行时机、响应式底层Proxy原理2.理论教学内容2.1Vue3应用实例创建：createApp().mount()，与Vue2newVue对比2.2Vue3完整生命周期四大阶段：创建/挂载/更新/销毁，8个基础钩子各钩子适用业务场景（created发请求、mount操作DOM）keep-alive缓存钩子activated/deactivated2.3数据绑定语法文本插值{{}}、v-html原始HTML、模板JS表达式限制2.4综合案例：登录表单、字符过滤（Vue3无过滤器，计算属性替代）2.5章节总结3.实操实训任务1.标准HelloVue页面编写，控制台修改数据观测响应式；2.完整生命周期打印案例，观测执行顺序；3.实战：简易登录页面（表单+插值）；4.实战：输入框小写转大写工具（计算属性实现过滤）。4.课后习题教材习题2，拓展：带校验的注册页面雏形第3章Vue基本指令（理论4h+实操4h）1.教学重难点重点：v-if/v-show、v-for、v-bind、v-model、v-on全套指令难点：v-if与v-for优先级、自定义指令钩子、修饰符综合使用2.理论教学内容3.1条件渲染指令v-if/v-else-if/v-else（销毁DOM）、v-show（控制display），场景选择3.2列表渲染v-for数组遍历、对象遍历、key作用、数组变异方法、计算属性过滤列表v-if和v-for同节点优先级问题与解决方案3.3v-bind属性绑定：简写:、动态参数、对象批量绑定3.4v-model双向绑定：文本/单选/复选框、.trim/.lazy/.number修饰符3.5methods方法、计算属性comput、侦听器watch三者区别3.6v-on事件：绑定、内联传参、事件/按键/系统修饰符3.7其他内置指令：v-once、v-cloak3.8自定义指令：全局/局部注册、五大钩子、动态参数、简写3.9综合案例：随机背景指令、注册表单页面3.10章节总结3.实操实训任务1.表格奇偶行v-if展示、v-for渲染列表；2.表单综合案例（单选、多选、输入框双向绑定）；3.计算器：计算属性实现运算；4.自定义指令实现图片预加载（随机底色占位）；5.完整注册页面开发。4.课后习题教材习题3，整理methods/computed/watch对比表格第4章样式绑定（理论2h+实操2h）1.教学重难点重点：:class对象/数组语法、:style内联样式绑定难点：组件样式透传、多重样式、浏览器自动前缀2.理论教学内容4.1HTMLclass动态绑定对象语法（条件类名）、数组语法、组件根类合并4.2内联style绑定对象、数组写法、自动浏览器前缀、多重样式兼容4.3实战：表格奇偶行区分样式4.4章节总结3.实操实训任务1.按钮动态激活样式切换；2.学生表格奇偶行配色完整案例；3.动态宽高、字体颜色内联样式绑定。4.课后习题教材习题4，实现页面loading加载样式第5章组件应用（理论4h+实操4h）1.教学重难点重点：组件通信、插槽、动态/异步组件难点：多层组件传值、作用域插槽、组件生命周期顺序2.理论教学内容5.1组件基础全局/局部注册、data必须是函数、组件复用隔离5.2组件通信四大方案props父子传值、$emit子传父、EventBus事件总线、全局状态（Vuex）5.3插槽Slot：默认插槽、后备内容、具名插槽、作用域插槽、动态插槽5.4动态组件<component>、keep-alive缓存、异步组件懒加载5.5综合案例：日历组件、全局弹窗组件5.6章节总结3.实操实训任务1.封装卡片基础组件，通过props传标题内容；2.实现具名插槽布局页面（头部/侧边/主体）；3.完整日历组件开发；4.JS动态创建全局弹窗组件。4.课后习题教材习题5，梳理父子组件生命周期执行顺序第6章组件复用（理论2h+实操2h）1.教学重难点重点：render渲染函数、mixin混入、Vue插件开发难点：mixin选项合并规则、JSX语法、函数式组件2.理论教学内容6.1渲染函数render与虚拟DOM、h()创建VNode、JSX简化写法函数式组件使用场景6.2Mixin混入：局部/全局混入、同名选项合并策略、自定义合并规则6.3Vue插件开发：install方法、全局扩展6.4案例：render函数渲染数据列表6.5章节总结3.实操实训任务1.不用模板，纯render渲染新闻列表；2.封装通用表单校验mixin混入；3.开发简单全局提示插件。4.课后习题教材习题6第7章VueRouter4路由（理论4h+实操4h）1.教学重难点重点：动态路由、嵌套路由、编程导航、导航守卫难点：全局/独享/组件守卫执行流程、history后端部署2.理论教学内容7.1路由基础：hash/history/memory三种模式、router-link/router-view7.2动态路由参数$route.params、参数监听、404捕获路由7.3进阶路由：嵌套路由、命名路由、命名视图、重定向/别名、props传参7.4History模式原理与Nginx/Apache后端配置方案7.5导航守卫：全局/路由独享/组件内守卫、完整解析流程7.6路由元信息、页面过渡动效、路由懒加载、滚动行为、页面数据获取7.7案例：传统节日盲盒动态路由7.8章节总结3.实操实训任务1.搭建多页面路由项目，实现底部tab切换；2.动态参数路由（节日详情页）；3.路由守卫实现登录权限拦截；4.路由懒加载拆分代码包。4.课后习题教材习题7第8章axios异步请求（理论2h+实操2h）1.教学重难点重点：axios基础请求、请求/响应拦截器难点：跨域处理、统一接口封装2.理论教学内容8.1axios简介、浏览器/Node双端运行原理8.2安装、get/post基础请求、并发请求8.3axios全局配置、请求参数、响应结构8.4请求拦截器、响应拦截器统一处理错误、取消请求8.5章节总结3.实操实训任务1.封装全局axios，统一baseURL、请求头；2.模拟接口获取列表数据渲染页面；3.拦截器统一处理加载提示、错误弹窗。4.课后习题教材习题8第9章VueCLI项目工程化（理论2h+实操2h）1.教学重难点重点：vuecreate创建项目、目录结构、npm命令难点：vue.config.js配置、webpack链式修改2.理论教学内容9.1VueCLI全套工具、全局安装、版本升级9.2图形化vueui、命令行创建Vue3项目9.3标准项目各文件夹作用、入口main.js解析9.4webpack基础、vue.config.js配置（configureWebpack/chainWebpack）9.5项目打包npmrunbuild、dist部署、本地预览9.6章节总结3.实操实训任务1.使用VueCLI手动创建带Router/Vuex的完整项目；2.修改vue.config.js配置开发代理；3.打包项目，使用serve本地预览dist文件夹。4.课后习题教材习题9第10章Vuex状态管理（理论2h+实操2h）1.教学重难点重点：state/getters/mutations/actions、辅助函数map难点：异步action、模块化命名空间2.理论教学内容10.1Vuex作用、单向数据流、适用场景10.2安装与创建Store10.3state：mapState辅助函数、组件获取全局状态10.4getters：派生状态、mapGetters10.5mutations：同步修改state、载荷、对象提交10.6actions：异步请求、组合异步操作、mapActions10.7模块modules：局部状态、命名空间、动态注册、复用模块10.8章节总结3.实操实训任务1.购物车全局状态（商品增减、总价计算）；2.模块化拆分用户模块与商品模块；3.搜索页面全局缓存搜索记录。4.课后习题教材习题10第11章红色旅游App综合项目（理论8h+实操6h）1.教学重难点重点：整合全书全部技术栈，企业级SPA开发流程难点：组件分层、路由规划、全局状态、接口请求一体化2.理论教学内容11.1项目整体需求与页面规划（首页/列表/搜索/详情/购物车/个人中心）11.2VueCLI搭建项目，安装axios、ElementPlus11.3各公共组件封装：头部、菜单、轮播、瀑布流、底部导航11.4各业务页面开发流程11.5全局路由配置、项目调试方法11.6章节总结3.综合大实训（课程期末大作业）完整开发红色旅游H5App：1.搭建工程、配置代理、引入UI库与网络请求；2.封装全部公共复用组件；3.完成6大页面开发；4.Vuex管理搜索、购物车全局数据；5.路由守卫控制页面访问；6.模拟接口获取旅游产品数据。第12章Vue3项目部署（理论0h+实操2h）1.教学重难点重点：dist打包产物、Nginx静态部署、history模式后端配置2.实操内容1.npmrunbuild打包生成静态资源；2.本地serve预览打包文件；3.Nginx服务器部署SPA项目，解决404问题；4