Vue.js前端开发基础与实战（微课版）教案-教学设计 第2章 Vue.js环境搭建与项目创建

Vue.js3.0从入门到实践教学设计课程名称：Vue.js3.0从入门到实践授课年级：授课学期：教师姓名：年月日课程名称第2章 Vue.js环境搭建与项目创建计划学时3内容分析在开发Vue前端页面之前，需要搭建好开发和测试环境，良好的开发环境对于稳定开发者以及提高生产效率都有着不可忽视的作用。在创建Vue项目之前，需要先搭建良好的Vue.js开发环境，包括安装Vue.js，理解Vue.js多种安装方式的不同之处，选择并安装合适的开发工具，进而提高开发效率，安装为调试项目服务的调试工具vue-devtools等，使开发者在完成环境搭建的基础上掌握Vue项目创建的方法，带领读者开启Vue前端开发之旅。教学目标与教学要求【知识目标】了解Vue.js的多种安装方法掌握Vue.js开发工具的安装熟悉Vue.js调试工具的安装掌握Vue.js项目创建的技巧【技能目标】能够正确安装Vue.js开发工具能够正确安装Vue.js调试工具能够创建Vue.js项目【育人目标】鼓励学生动手实践，培养学生的创新思维，促进学生的个性发展。培养学生网络的伦理道德和法律法规，促进学生养成良好的习惯。教学重点安装Vue.js安装VSCode安装vue-devtools实训：创建第一个Vue.js程序教学难点实训：创建第一个Vue.js程序教学方式课堂讲解配合PPT演示教学过程第一课时（安装Vue.js、Web前端开发工具）回顾内容回顾上节内容，引出本节内容回顾上节的内容，并提问学生上节练习中的问题，学生回答完后，由上节内容引出本节要讲的安装Vue.js、Web前端开发工具等内容。明确学习目标掌握Vue.js的安装方式理解Web前端开发工具VisualStudioCode知识讲解知识点1-安装Vue.jsVue.js的常用安装方式主要有4种，包括CDN方式、NPM方式、VueCLI方式、Vite方式。CDN方式安装Vue.jsCDN方式安装Vue.js的语法格式开发者可借助script标签实现CDN方式安装Vue.js，语法格式如下所示。<scriptsrc="/vue@next"></script>CDN方式安装Vue.js的优缺点优点：不需要下载和安装Vue.js，可以直接使用CDN文件，减少了本地文件占用和维护的成本。缺点：依赖于CDN服务商，可能会出现CDN服务不稳定或者CDN文件更新不及时的情况。NPM方式安装Vue.jsNPM方式安装Vue.js的命令代码NPM方式安装Vue.js的命令代码如下所示。#安装最新稳定版$npminstallvue@next安装CNPM的命令代码如下所示。npminstall-gcnpm--registry=完成CNPM安装后，开发者可使用cnpm命令安装项目所需模块，具体命令代码如下所示。cnpminstall模块名称NPM方式安装Vue.js的优缺点优点：可以自由选择Vue的版本和更新方式；可以使用Vue的脚手架工具VueCLI，方便快捷地创建和管理Vue项目；可以和其他NPM包管理器配合使用。缺点：需要下载和安装Node.js和NPM环境，增加了本地文件占用和维护成本。安装速度可能会受到网络环境的影响。VueCLI安装Vue提供了一个官方的脚手架VueCLI，它可以快速搭建一个应用，它为现代前端提供了batteries-included的构建设置。若读者是初学者，建议读者先熟悉Vue本身之后再使用VueCLI。本书将在第9章将详细介绍脚手架的安装及使用。Vite安装Vite是Vue的作者开发的一个面向现代浏览器的，更加轻量、快捷的前端构建工具，Vite可为前端工作者提供良好的开发体验。本书将在第9章详细介绍Vite的安装与使用。知识点2-Web前端开发工具目前市场上主流的Web前端开发工具有WebStorm、VisualStudioCode、SublimeText、HBuilderX、Dreamweaver等，本书选用的开发工具是VisualStudioCode。VisualStudioCode（简称VSCode）是微软开发的一个轻量级代码编辑器，支持常见的语法提示、代码高亮、Git等功能，具有开源、免费、跨平台、插件扩展丰富、运行速度快、占用内存少，开发效率高等特点，网页开发中经常会使用到该软件，非常灵活方便。读者可进入VSCode官方页面，下载VSCode的安装包进行安装，官方页面如下图所示。知识巩固与作业（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）老师布置相关作业进行练习。第二课时（安装VSCode、安装vue-devtools、实训：创建第一个Vue.js程序）回顾内容回顾上节内容，引出本节内容回顾上节的内容，并提问学生上节练习中的问题，学生回答完后，由上节内容引出本节要讲的安装VSCode、安装vue-devtools、实训：创建第一个Vue.js程序等内容。明确学习目标掌握VSCode的安装方式掌握vue-devtools的安装方式掌握创建第一个Vue.js程序的方式知识讲解知识点1-安装VSCode本节将对VSCode的安装和VSCode插件的安装进行介绍。VSCode的安装首先打开VSCode的官方网站，选择Windows选项中的UserInstaller下载VSCode。下载完成后的文件名为VSCodeUserSetup-x64-1.67.0.exe，运行该文件进入VSCode的安装界面，根据向导界面的提示，连续单击“下一步”按钮即可完成VSCode的安装。VSCode插件的安装接下来将详细介绍Vue开发中常用的4个插件。Chinese中文Vetur代码高亮ESLint代码检测校验CodeRunner快捷运行知识点2-安装vue-devtoolsvue-devtools是一款基于GoogleChrome浏览器、用于调试Vue应用的浏览器扩展。接下来介绍vue-devtools的安装步骤。下载压缩包解压安装包下载第三方依赖执行npminstall-gyarn命令安装yarn。执行yarninstall命令下载第三方依赖。vue-devtools源码编译完成后，可查看devtools-main文件夹的目录结构。Google浏览器的开发者模式打开Google浏览器，选择扩展程序选项。进入扩展程序管理页面，单击开发者模式右侧的单选按钮开启开发者模式。安装vue-devtools开启Google浏览器的开发者模式后，单击“加载已解压的扩展程序”按钮并选择devtools-main文件夹下的packages\shell-chrome文件夹，即可安装vue-devtools扩展。知识点3-实训：创建第一个Vue.js程序本节将以八大菜系为主题，构建一个“菜系介绍”页面。菜系介绍页面结构简图菜系介绍页面的结构简图如下图所示。实现菜系介绍页面效果使用Vue创建程序非常简单，具体步骤如下所示。第1步，安装Vue.js库并使用Vue.createApp()方法创建一个应用程序实例。第2步，在data()函数中定义页面中需要渲染的数据，将data()中的数据通过{{}}插值语法展示在页面中。第3步，调用mount()方法在指定的DOM元素上挂载应用程序实例的根组件，实现数据的双向绑定，具体代码可参考教学PPT或教材。读者可使用浏览器控制台或vue-devtools调试工具来验证其数据的响应性。Console选项在浏览器中运行上述代码，按下F12键打开控制台，切换至Console选项，并输入vm.detail="豆腐为补益、清热养生食品"，按下Enter键，可以发现页面中的详情介绍内容同步发生了变化，显示效果如下图所示。Vue选项使用vue-devtools进行调试，按下F12键打开控制台，切换至Vue选项，并修改detail="此菜夏天食用能生津止渴"，单击“保存”按钮，可以发现页面中的内容同步发生了变化，显示效果如下图所示。知识巩固与作业（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）老师布置相关作业进行练习。第三课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容