Vue.js3前端开发基础及项目化应用教案单元10构建工程化的Vue项目.docx

Vue.js前端开发基础及项目化应用教学设计课程名称：Vuejs前端开发基础及项©化应用授课年级：授课学期：学年第一学期教师找名：2023年09月09日课题名称单元10构建工程化的Vue项目计划学时6学时内容分析企业级Vue项目通常是单页面应用，且采用工程化方式3工程项目的构建，需要依赖于VUeCLI、EIementPkIS等辅助Zr本单元将介绍VueCLI工具的使用方法，利用VueCLI和Elem(工程化的VUe前端项目，以及项目的开发和部署的实现。通过任务,进一步帮助学习者熟悉VueCLI工具的使用，掌握Vuc的开发方法以及对ElementPlus组件库的运用。E开发。Vue.具来完成。mtPlus搭建“todoMVC”5工程项目教学目标及基本要求1 .掌握VueCLI工具的使用方法2 .了解工程化的Vue项目的项目结构及其组成要素3 .能够利用VueCLI开发工程化的Vue项目4 .了解Vite工具的使用方法教学重点1 .了解工程化的Vue项目的项目结构及其组成要素2 .能够利用VueCLI开发工程化的Vue项目教学难点教学方式教学采用教师使用PPT讲解和案例示范相结合的方式教学过程第一课时(VlIeCLl工具，ViIe工程项目构建)一、创设情境，引入工程化前端项目开发的必要性1.教师通过应用场景描述，引出前端工程化概念。前端:程化是前端发展的必然趋势，这使得工程化的开发方式成为大中型前端项目开发的必备技能。工程化的Vue项目开发需要借助一些工具的支持，以提高开发效率。Vue官方提供的VueCLI工具可实现项目的快速搭建和便捷管理，基于VUe的UI组件库ElementPlus则能让页面布局的构建变得更为容易。2.明确学习目标。> 了解ViIeCU工具> 掌握VueCLI工具的安装方法和常用命令> 掌握VueCLI工具搭建Vue工程的方法二、进行重点知识的讲解1.教师根据课件，介绍VUeCLl工具，并通过演示来讲解该工具的安装和使用方法。(1)VueCLI概述VUeCLl是一个基于Vue进行快速开发的完整系统，能够帮助开发各快速搭建项目的交互式脚手架。(2)VUeCLl安装步骤/安装Nodejs双击安装文件node.exe进行安装/使用npm安装VueCLInpminstall-gvue/cli2.教师根据课件，讲解VUeeLl搭建项目的具体方法，并通过项目的创建过程进行演示。(1)项目创建命令vuecreatefirst-app(2)项目参数设置/Default(Vue3babel,eslint)：Vue3的项目，只包含JavaScript编译器Babek代码检测工具ESLinto/Default(Vue2babel,eslint)：Vue2的项目，只包含JavaScript编译器Babek代码检测工具ESLint0/Manuallyselectfeatures：手动选择特性。(3)项目运行命令cdfirst-appnpmrunserve三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括VUeCLl工具的特点，VucCLI常用命令的使用方法，利用VUeCLI工具搭建个完整结构的VUe项目的实现过程。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第二课时(项目结构、项目入口文件、单文件组件)一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了VueCLI工具，VueCLI的安装步骤，VueCLI常用命令的使用方法，利用VUeCLl搭建具有完整结构的VUe项目的具体流程。接下来，本节课将对于VUe项目结构进行剖析，讲解项目结构、项目入口文件和单文件组件等内容。3 .明确学习目标。> 了解VUe工程项目的项目结构> 了解项目入口文件的作用和编写方法掌握单文件组件的编写方法二、进行重点知识的讲解1.教师根据课件，介绍VUe工程项目的结构，并使用实例进行演示。(1)VUe工程项目结构/node_modules/public/src/.gitignoreJbabel.config.js/jsconfig.json/package-lock.json/package.json/README.md/vue.config.js(2)使用案例讲解VUe工程项目结构2 .教师根据课件，介绍项目入口文件的作用和编写方法，并使用代码进行演ZjSo导入VUe库文件的CreateApp函数importCreateAppfrom'vue'导入根组件App.vueimportAppfrom,.App.vue'/创建Vue应用实例，并挂载根组件createApp(App).mount(app,)3 .教师根据课件，介绍单文件组件的编写方法，并使用代码进行演示。(1)单文件组件单文件组件(SingleFileComponent,SFC)是一种特殊的文件格式，它将Vue组件的template>script和style这3个部分封装在一个扩展名为.vue的单个文件中。（2）使用案例讲解编写单文件组件的具体方法。三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的知识点，包括Vue项目结构组成及其作用，项目入口文件作用和编写方法，单文件组件的构成及其编写方法，并结合VUeCLl工具，能够构建具有简单功能的VUe工程项目。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第三课时（项目配置文件，新一代构建工具Vite）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了VUe项目结构组成及其作用，项目入口文件作用和编写方法，单文件组件的构成及其编写方法。接下来，本节课将通过实例讲解项目主要配置文件package.json和vue.config.js各配置项作用，以及使用方法，新一代构建工具Vite的使用方法。3 .明确学习目标。> 了解项目配置文件PaCkageJson> 了解项目配置文件vue.config.js> 熟悉Vite工具构建项目的方法二、进行重点知识的讲解1.教师根据课件，介绍项目配置文件PaCkageJson中各配置项的作用，并使用代码进行演示。（1）package.json作用用于记录项目的基本信息（如名称、版本、许可证、启动项目的方法、声明依赖包、运行脚本等元数据），其配置项目包括：name、versionscripts、dependencies和devDependencies<>（2）使用案例讲解该配置文件的具体作用。2.教师根据课件，介绍VgCOnfigJS中各配置项的作用和配置方法，并使用代码进行演示。（1）vue.config.js作用用于保存与项目部署相关的配置，是一个可选的配置文件（1）actions的作用。配置项目包括：PUbliCPath、OUtPUtDir、devServero（2）使用案例讲解该配置文件的具体作用。3.教师根据课件，介绍Vhe工具的特点，并使用代码进行演示。（1）特点/快速的冷启动/即时的HMR/真正的按需编译（2）构建VUe项目/构建项目命令npmcreatevitelatest/运行项目命令Cdvite-project进入目录vite-projectnpmruninstall安装项目的依赖包npmrundev/启动开发服务器三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的知识点，包括项目配置文件package.SOiKvue.config.js的各配置项目的作用,掌握vue.config.js主要配置项的配置方法，了解Vite工具的应用场景，熟悉Vite工具构建VUe项目的具体流程。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第四课时(ElementPlus组件库)一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了配置文件PaCkageJson和vuc.config.js各配置项作用，以及使用方法，新代构建工具Vite的使用方法。接下来，本节课将介绍ElementPlus组件库中常用组件的使用方法，以及在Vue项目中应用ElementPlus组件库的方法。3 .明确学习目标。> 了解EIeInentPlus的特点> ElementPlus组件库中常用组件的使用方法> 掌握VUe项目中应用ElementPlus组件库的方法二、进行重点知识的讲解1 .教师根据课件，介绍ElementPlus组件库及其特点。ElementPlus是一个基于VUe3的UI组件库，用于制作页面样式、设计页面结构。ElementPlus内置/丰富的样式、布局和组件，可以帮助开发者快速建成网站原型。具有易用性、灵敏性和可定制性的特点。2 .教师根据课件，介绍在VUe项目中引入EIemenlPIUS组件库的方法，并使用代码进行演示。(1) CDN方式/导入ElementPlus/注册ElementPlus为全局组件库/使用ElementPlus(2)插件方式/安装ElementPlus/导入ElementPlus/使用ElementPlus3.教师根据课件，介绍ElemenlPkIS组件库中的常用组件，并使用代码进行演示。(1)基础组件如elbutton等(2) el-dialog(3) el-form三、归纳总结，布置课后作业1 .回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要了解的ElementPlus组件库的特点,掌握Vue项目中应用ElementPlus组件库的方法，掌握ElementPlus组件库中常用组件的应用场景和使用方法。2 .布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3 .使用在线学习平台下发课后作业。第五课时（VueCLI在实际项目中的应用）一、回顾上节课内容，继续讲解本课时的知识1 .教师对学生们的疑问进行统一答疑。2 .回顾上个课时所学习的内容，继续介绍本课时的内容。上节课主要为大家介绍了ElementPlUS组件库的特点，VUe项目中应用ElementPlus组件库的方法，ElementPlus组件库中常用组件的应用场景和使用方法。接下来，本节课将通过实际应用项目，来进一步熟悉VUeCLl和ElementPlus组件库的使用方法，并掌握工程化Vue项目的构建和开发方法。3 .明确学习目标。> 掌握VUeCLI和ElementPlus组件库的使用方法> 掌握工程化Vue项目的构建和开发方法二、进行重点知识的讲解1.教师根据课件，介绍项目10一一UXIOMVC的需求描述、实现思路和代码实现。（1）需求描述todoMVC是一个经典案例，其功能是处理待办事项列表。它要求每在输入框中输入个任务信息并单击回车键，将生成一个新的任务信息列表项。每个任务信息列表项由复选框、"删除''按钮组成，单击“删除”按钮可删除该任务，选中复选框表示任务为完成状态。任务信息列表下方显示已完成任务数和全部任务数，单击“清除已完成任务“按钮将清除已完成任务信息列表项。（2）实现思路/使用VlIeCLl搭建Vue工程项目todomvc»在项目中引入ElementPlus组件库来构建页面。/将页面布局分割成上、中、下3个部分，分别对应输入框、任务信息列表和任务信息列表下方内容，对应地创建3个组件文件：TodoHeadeEvueTodOLiSt.vue、TodoFooter.vue<>TodoHeader.vue所定义的组件TodoHcader用于实现输入任务信息，TodoLisLvue所定义的组件TodoList用于实现任务信息列表的显示和操作，TodoFooter.Vuc所定义的组件TodoFooter用于实现任务完成情况统计，以及清除页面中已完成任务信息列表项。/通过根组件App调用TodoHeadersTodoList和TodoFooter组件。App接收TodoHeader传来的任务信息，与TodOList、TodoFooter进行双向数据传递，实现任务信息列表的增加、删除及其他操作。（3）功能实现任务10-1构建项目主页布局任务10-2构建组件TodoHeadcr任务10-3构建组件TodoList10-4构建组件TodoFter三、归纳总结，布置课后作业1.回顾上课前的学习目标，对本节课知识点进行总结。教师带领学生总结本节课需要熟悉的知识点，包括熟悉VueCLI和ElementPklS组件库的使用方法,并掌握工程化VUe项目的构建和开发方法。2.布置随堂练习，检查学生掌握情况。根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。3.使用在线学习平台下发课后作业。.第六课时（项目实践）项目实践主要针对本单元中需要重点掌握的知识点，通过项目功能实现来加强概念的理解，熟悉并掌握编程知识点的应用，通过项目实践可以考察同学对知识点的掌握情况和应用能力。题目：在实际开发过程中，网站首页可拆分成页头、主体部分和页脚3个组件，请使用VueCLI工具实现整个首页的页面效果，要求最终效果如图所示。形式：单独完成要求：利用本单元中的知识点，实现项目需求对应的功能，并且程序能够正常运行。考题和习题见教材单元10配套的习题教学后记