单元10 构建工程化的Vue项目.docxVIP

2023年09月09日

《Vue.js前端开发基础及项目化应用》教学设计

课程名称：Vue.js前端开发基础及项目化应用

授课年级：2021级

授课学期：2023学年第一学期

教师姓名：某某老师

课题名称

单元10构建工程化的Vue项目

计划学时

6学时

内容分析

企业级Vue项目通常是单页面应用，且采用工程化方式来开发。Vue工程项目的构建，需要依赖于VueCLI、ElementPlus等辅助工具来完成。本单元将介绍VueCLI工具的使用方法，利用VueCLI和ElementPlus搭建工程化的Vue前端项目，以及项目的开发和部署的实现。通过

“todoMVC”任务，进一步帮助学习者熟悉VueCLI工具的使用，掌握Vue工程项目的开发方法以及对ElementPlus组件库的运用。

教学目标及基本要求

1.掌握VueCLI工具的使用方法

2.了解工程化的Vue项目的项目结构及其组成要素3.能够利用VueCLI开发工程化的Vue项目

4.了解Vite工具的使用方法

教学重点

1.了解工程化的Vue项目的项目结构及其组成要素2.能够利用VueCLI开发工程化的Vue项目

教学难点

教学方式

教学采用教师使用PPT讲解和案例示范相结合的方式

教学过程

第一课时

（VueCLI工具，Vue工程项目构建）

一、创设情境，引入工程化前端项目开发的必要性

1.教师通过应用场景描述，引出前端工程化概念。

前端工程化是前端发展的必然趋势，这使得工程化的开发方式成为大中型前端项目开发的必备技能。工程化的Vue项目开发需要借助一些工具的支持，以提高开发效率。Vue官方提供的VueCLI工具可实现项目的快速搭建和便捷管理，基于Vue的UI组件库ElementPlus则能让页面布局的构建变得更为容易。

2.明确学习目标。

了解VueCLI工具

掌握VueCLI工具的安装方法和常用命令

掌握VueCLI工具搭建Vue工程的方法

二、进行重点知识的讲解

1.教师根据课件，介绍VueCLI工具，并通过演示来讲解该工具的安装和使用方法。

（1）VueCLI概述

VueCLI是一个基于Vue进行快速开发的完整系统，能够帮助开发者快速搭建项目的交互式脚手架。

（2）VueCLI安装步骤

安装Node.js

双击安装文件node.exe进行安装

使用npm安装VueCLInpminstall-g@vue/cli

2.教师根据课件，讲解VueCLI搭建项目的具体方法，并通过项目的创建过程进行演示。

（1）项目创建命令

vuecreatefirst-app

（2）项目参数设置

Default([Vue3]babel,eslint)：Vue3的项目，只包含JavaScript编译器Babel、代码检测工具ESLint。

Default([Vue2]babel,eslint)：Vue2的项目，只包含JavaScript编译器Babel、代码检测工具ESLint。

Manuallyselectfeatures：手动选择特性。

（3）项目运行命令

cdfirst-appnpmrunserve

三、归纳总结，布置课后作业

1.回顾上课前的学习目标，对本节课知识点进行总结。

教师带领学生总结本节课需要熟悉的知识点，包括VueCLI工具的特点，VueCLI常用命令的使用方法，利用VueCLI工具搭建一个完整结构的Vue项目的实现过程。

2.布置随堂练习，检查学生掌握情况。

根据在线课程资源，给学生布置随堂练习，检测学生的掌握程度，并对学生出现的问题进行解决。

3.使用在线学习平台下发课后作业。

第二课时

（项目结构、项目入口文件、单文件组件）

一、回顾上节课内容，继续讲解本课时的知识

1.教师对学生们的疑问进行统一答疑。

2.回顾上个课时所学习的内容，继续介绍本课时的内容。

上节课主要为大家介绍了VueCLI工具，VueCLI的安装步骤，VueCLI常用命令的使用方法，利用VueCLI搭建具有完整结构的Vue项目的具体流程。接下来，本节课将对于Vue项目结构进行剖析，讲