Vue.js3.x前端开发技术与实战56课时教学大纲及授课计划.docx

VUCj、3.RFromEndDevelopmentTechnologyandPnKrtlCCVue.js3.x前端开发技术勺实战，鬲D1<wW）<fs）<>"¾i） M风临：从海卬式APl自缭台式AH平©过澧,由/*<.系;MTiB 内喜构罐：MVbXx*ttWfcnt11W,脚口工怵ASXF *A*<H:M*i幺5咫匕为U赛被述田好升.经建囊网,总联深入4彳村出版社VueJs3.x前端开发技术与实战学分：3.5学时：56（40时理论/16时上机）一、课程的性质、地位与任务Vue.js3.x前端开发技术与实战课程是计算机类专业的一门专业（必修/选修）课程，通过对Vue.js3.X的新特性和开发环境配置的了解和Vue.js3.X基础语法、指令、组件、过渡与动画、Vuex4、VueRouter4、Axios和JSONServerVite4/5新前端构建工具和ElementPlus等周边生态系统的学习和研究，让学生理解和掌握Vue.js3.X这一渐进式框架的核心概念（组件化、模块化），通过项目实践培养学生开发和设计复杂的单页面SP（SinglePageweb/Application）应用的基本技能和素质要求，适应互联网行业Web前端开发相关岗位的需要。二、课程的教学目标与基本要求教学基本要求是让学生理解Vue.js渐进式框架的核心概念，熟练掌握Vue.js3.x基础语法、指令、组件开发、过渡与动画及Vue3.X新特性等关键概念；掌握VUeRoUter4、VUeX4、Axios、JSONServerVite4/5、ElementPIUS等周边生态系统的应用技术。本课程的教学目标是以“社会主义核心价值观”和“大国工匠精神”为主线，在教学和软件开发过程中逐步培养学生“爱岗敬业、无私奉献、持续专注、开拓进取、精益求精，追求极致”的基本工程素质，具有熟练地运用VueCLI和Vite等前端开发和构建工具和Vue.js周边生态系统来构建中小型Web单页面应用的能力。经过完整的项目实战能够具备了胜任Web移动前端基础开发的工程师的初步能力。三、课程内容（重点,难点）第1章Vuejs发展概述1. 1Vue.js简介1.1.1Vue.js发展简史1.1.2Vue3新特性简介1.2 Vue.js生产环境配置1 .2.1Vue.js引入方法2 .2.2安装VueDevtools3 .2.3NOde.js环境配置4 .2.4创建第一个VUe单页程序1.3 Vue.js开发工具1.3.1 VisualStudioCode1.3.2 HBuilderX1.4 ECMScript6.0基础1.4.1 4.1let和const1.4.2 解构赋值1.4.3 箭头函数1.4.4 展开运算符1.4.5 模板字符串第2章Vue.js基础2.1 MVVM模式2.1. 1MVVM模式简介2.2. 2MVVM模式的前端框架发展趋势2.1.3MVVM模式的应用2.2数据绑定与插值2. 2.1文本绑定2. 2.2HTML代码绑定2. 2.3属性绑定2. 2.4JavaScript表达式绑定2.3计算属性与方法2. 3.1计算属性基础应用2. 3.2计算属性的setter和getter2. 4侦听属性watch2. 4.1watch属性基本用法2. 4.2watch属性高级用法2.5 生命周期钩子函数2. 5.1生命周期钩子函数作用3. 5.2生命周期钩子函数应用2.6 ZiVue中数组变动更新2. 6.1变异方法3. 6.2非变异方法2. 7控制台console对象2. 7.1显示信息的命令3. 7.2占位符4. 7.3分组显示console,groupO5. 7.4查看对象的信息console,dir0第3章Vuejs指令5.1 条件渲染3.1. 1v-if/v-ele-if/v-else指令3.2. 2Vue3.X中key值的应用6. 1.3v-show指令3. 2列表渲染（v-for指令）3. 3类与样式绑定（v-bind指令）3.4事件处理（v-on指令）3.5表单输入绑定（VFiodel指令）3.6v-html与v-text指令3.7v-oncev-cloakv-pre指令3.8支Vue.js自定义指令3 .8.1自定义指令注册4 .8.2对象字面量第4章Vue3新特性应用4.1 响应式基础4. 1.1组件选项setup（）4.1. 2ref（）、reactiveOtoRefs（）和toRef（）4.1.3watchWatchEffect和computed4.2 *Vue3生命周期4 .2.1Vue3生命周期函数（组合式API）5 .2.2生命周期钩子函数应用第5章Vue.js组件开发5.1组件基础5 .1.1组件命名6 .1.2组件注册5.2 组件间通信5. 2.1父组件向子组件传值6. 2.2子组件向父组件传值7. 2.3父链与子组件索引5.3 插槽5.3.1匿名插槽5.3.2具名插槽5.3.3作用域插槽5.3.4动态插槽名第6章Vuajs过渡与动画6.1 单元素/组件的过渡6.1.1 过渡的类名6.1.2 1.2CSS过渡6.1.3 3CSS动画6.1.4 自定义过渡的类名6.1.5 同时使用过渡和动画6.1.6 显性的过渡持续时间6.1.7 JavaScript钩子6.1.8 1.8VeloCity动画库简介6.2 初始渲染的过渡6.3 多个元素的过渡6.4 多个组件的过渡6.5 列表过渡6. 5.1列表的进入/离开过渡6.5.2列表的排序过渡6.5.3列表的交错过渡第7章VUe开发环境与SFC新特性7.1Vue开发环境简介7.1.1Node,js简介7.1.2NOde.js部署7.2Node包管理器npm7.2.1npm简介7.2.2Znpm常用命令7.3WebPaCk打包工具7.3.1WebPaCk简介7.3.2webpack配置与应用7.3.3webpack配置加载器loaders7.3.5webpack配置开发服务器7. 4VueCLI7. 4.1VueCLI安装8. 4.2VueCLl创建Vue项目8.5 单文件组件SFC7. 5.1单文件组件的结构8. 5.2单文件组件的新特点8.6 组合式API：依赖注入8.7 组合式APl模板引用7. 7.1获取节点8. 7.2组件上使用ref7.8组合式函数7. 9模板refs第8章路由VueRouter8.1VueRouter概述8. 1.1VueRouter安装与使用8. 1.2VueRouter基础应用8. 2VueROUter高级应用8. 2.1动态路由匹配8. 2.2嵌套路由8. 2.3编程式导航8.2.4命名路由8. 2.5命名视图8 .2.6重定向和别名9 .2.7HTML5History模式8. 2.8路由组件传参第9章状态管理VUeX9.1Vuex概述9.1. 1VUeX定义9. 1.2简单状态管理-store模式9. 2Vuex基本使用9.3Vuex核心概念9. 3.1一个完整的store结构10. 3.2最简单的store11. 3.3Vuex中state12. 3.4VUeX中getter13. 3.5Vuex中mutation14. 3.6VUeX中action15. 3.7Vuex中module9.4Vuex多模块实战案例第10章Vue3UI框架ElementPlus16. 1ElementPlus概述10.1.1ElementPlus安装与配置10.1.2ElementPlus导航10.1.3ElementPlus快速开始10.1.4Elementlus全局配置10.2ElementPlus组件10.3ElementPlus组件应用10.3.1Basic基础组件一Container布局容器10.3.2Basic基础组件一Layout布局10.3.3配置组件一config-provider全局配置10. 3.4Form表单组件10. 3.5Data数据展示一Avatar>Badge>Calendar、CardCarousel组件11. 3.6Data数据展示一Table表格12. 3.7Data数据展示一VirtualizedTable虚拟化表格组件10. 3.8Navigation导航组件第11章VUe3.X构建工具Tite11. 1Vite构建项目11. 1.1Vite简介13. 1.2搭建第一个Vite项目11.2Vite创建惠民早点'项目11.2.1 创建默认项目11.2.2 更新完善项目第12章网络请求库Axios与JSONServer12.1Axios概述12.1.1Axios简介12. 1.2AXiOS特性14. 1.3AXioS应用14.2 ZiAxios举例12.2.1执行get请求12.2.2执行post请求12.2.3一次执行多个请求12.3JSONServer与Postman12.3.1JSONServer简介12.3.2JSONServer应用12.3.3POSIInan-接口测试工具14.4 跨域请求数据12. 4.1VueCLl创建项目跨域配置12. 4.2Vite创建项目跨域配置12.5AxiosAPI12. 5.1AXioS可以通过配置(config)来发送请求13. 5.2请求方式的别名。14. 5.3请求配置。15. 5.3AXioS实例12. 6Axios拦截器12.7AXiOS应用实战12. 7.1请求本地JSON数据13. 7.2请求远程天气预报数据第13章Vue3+ElementPIUS实战一简易图书管理系统13.1 简易图书管理系统需求14. 1.1简易图书管理系统功能15. 1.2简易图书管理系统实现技术13.2简易图书管理系统实现13. 2.1项目创建13. 2.2定义main.js13. 2.3修改pp.vue组件13. 2.4定义BOokVieW组件13. 2.5定义Header.vue组件13. 2.6定义Footer.vue组件13. 2.7定义router/index.js13. 2.8定义store/index.js13. 2.9定义HomeView.vue组件13. 2.10定义SettingView.vue组件13. 2.11定义AboutView.VUe组件13. 2.12定义BookAdd.vue组件13. 2.13定义BookModify.vue组件13. 2.14定义BookQuery.vue组件四、时间分配分段标识序号教学内容教学环节（学时）讲课实训小计课时教学形式内容课时教学形式