《Vue.js前端开发实战（第2版）-教学设计 第1章 初识Vue,js.docx》由会员分享，可在线阅读，更多相关《Vue.js前端开发实战（第2版）-教学设计 第1章 初识Vue,js.docx（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、黑马程序员Vue.js前端开发实战（第2板）教学设计课程名称：授课年级：授课学期：教师找名：课题名称第1章初识Vue.js计划 课时5课时教学引入在前端开发中，一个优秀的框架可以帮助用户解决一些常见的问题，有助 于高效地完成工作。Vue.js (简称Vue)作为前端开发常用的框架之一，不仅可 以提高项目的开发效率，而且可以改善开发体验。为了帮助读者对Vue有一个 初步的认识，本章将对Vue的基础知识进行详细讲解。教学目标 使学生了解前端技术的发展，能够说出使用框架开发项目的优势 使学生了解什么是Vue,能够说出Vue的基本概念 使学生了解Vue的特性，能够说出Vue的4个特性 使学生了解Vue
2、的版本，能够说出Vue 2和Vue 3的区别 使学生掌握Visual Studio Code编辑器的使用方法,能够完成中文语言扩展、 Volar扩展的安装，以及使用Visual Studio Code编辑器打开项目并在项目 中创建一个HTML5文档 使学生掌握Node.js环境的搭建，能够独立完成Node.js的下载和安装 使学生掌握常见的包管理工具的使用方法,能够应用叩m和yarn相关命令 下载、升级、卸载包 使学生掌握Vite的使用方法，能够使用Vite创建Vue 3项目教学重点 创建Vue 3项目教学难点无教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教 学 过 程第一课时(前端
3、技术的发展、什么是Vue、Vue的特性、Vue的版本)一、通过直接引入的方式导入新课前端技术在近几年飞速发展，从最初的HTML、CSS和JavaScript,到现在 的各种框架、工具和库，前端开发已经发展成为Web应用开发中的重要一环。 本节课将详细讲解前端技术的发展、什么是Vue、Vue的特性和Vue的版本的 相关知识点。二、新课讲解知识点1前端技术的发展教师通过PPT的方式讲解前端技术的发展。(1)前端开发的基础语言及作用。(2) jQuery受开发人员欢迎的原因。(3)移动端网页。(4)基于MVVM模式的前端开发框架。知识点2.什么是Vue教师通过PPT的方式讲解什么是Vueo(1)什么
4、是Vue。(2)使用Vue进行项目开发的优势。(3) Vue是基于MVVM模式的框架。(4) MVVM的组成部分。(5) Vue基本工作原理。知识点3-Vue的特性教师通过PPT的方式讲解Vue的特性。(1)数据驱动视图。(2)双向数据绑定。(3)指令。(4)插件。知识点4-Vue的版本教师通过PPT的方式讲解Vue的版本。(1) Vue的版本介绍。(2) Vue 3的新特性。(3)常用的UI组件库。三、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。四、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第二课时(Visual Studio
5、 Code编辑器、Node.js环境、常见的包管理工具) 一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课“工欲善其事，必先利其器:在使用Vue开发项目之前，要先搭建出项 目的开发环境。本节课将详细讲解在Vue开发环境中用到的一些软件，包括 Visual Studio Code编辑器、Node.js环境以及常见的包管理工具。三、新课讲解知识点1-Visual Studio Code编辑器教师通过PPT结合实际操作的方式讲解Visual Studio Code编辑器。(1)什么是 Visual Studio Code。(2) VS
6、 Code编辑器的特点。(3)下载和安装VS Code编辑器。(4)安装中文语言扩展。(5)安装Volar扩展。(6)通过代码演示如何使用VS Code编辑器。知识点2-Node.js环境教师通过PPT结合实际操作的方式讲解Node.js环境。(1)什么是 Node.js。(2)安装 Node.js。知识点3.常见的包管理工具教师通过PPT结合实际操作的方式讲解常见的包管理工具。(1)什么是包。(2)使用包管理工具的优势。(3)常见的包管理工具。npmo 什么是npm 查看npm版本 使用npm包管理器可以解决某些场景的需求 npm中常用的命令 为叩m设置镜像地址yarn。 什么是yarn 安
7、装yarn 查看yarn版本 为yarn设置镜像地址 yarn中常用的命令 yarn与npm包管理工具的区别四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第三课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：Visual Studio Code编辑器、Node.js环境、常见的 包管理工具)形式：单独完成题目：完成Vue开发环境的搭建。具体要求：(1
8、)下载和安装VS Code编辑器，完成中文语言扩展、Volar扩展的安装, 以及使用VS Code编辑器打开项目，并在项目中创建一个HTML5文 档。(2)下载和安装Node.jso(3)应用npm和yarn相关命令下载、升级、卸载包。第四课时(什么是Vite、创建Vue3项目、Vue 3项目的目录结构、Vue3项目的运 行过程)一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固 讲解。二、通过直接引入的方式导入新课在使用Vue 3开发大型项目时; 需要考虑目录结构、热加载、部署、代码 单元测试等环节。如果这些环节全部通过手动实现，效率比较低，此时可以借 助Vite快
9、速创建一个可以按需添加各种功能的项目。本节课将详细讲解使用 Vite创建Vue 3项目的相关知识点。 三、新课讲解知识点1 .什么是Vite教师通过PPT结合实际操作的方式讲解什么是Viteo(1)什么是Vite。(2)使用Vite创建项目的好处。知识点2.创建Vue 3项目教师通过PPT结合实际操作的方式讲解Vue 3项目的创建。(1) Vite提供的两种创建项目的命令。 手动创建项目的命令。 使用npm或yarn包管理工具搭配Vite手动创建项目的命令 通过代码演示如何手动创建Vue 3项目 通过模板自动创建项目的命令。 使用npm或yarn包管理工具搭配Vite通过模板自动创建项 目的命
10、令 通过代码演示如何通过模板自动创建Vue 3项目知识点3-Vue 3项目的目录结构教师通过PPT方式讲解Vue 3项目的目录结构。(1) Vue 3项目的目录结构。(2)简要介绍Vue 3项目的目录结构中各个目录和文件的作用。知识点4Vue 3项目的运行过程教师通过PPT的方式讲解Vue 3项目的运行过程。(1) Vue 3项目的运行过程。(2)对重点文件进行代码解析。 srcApp.vue 文件 index.html 文件 srcmain.js 文件四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给 予指导。五、布置作业教师通过高校教辅平台()布置本节课作业以及下节课 的预习作业。第五课时(上机练习)上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错 的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的 熟练程度。上机：(考察知识点为：创建Vue 3项目)形式：单独完成题目：创建Vue3项目。具体要求：打开命令提示符，切换到项目目录下，使用yarn创建一个基于Vite+Vue 模板且项目名称为hello的项目。教学后记