《Web前端开发》课件-任务一 初识Vue

Web前端开发项目八浅谈Vue任务一

初识Vue学习目标：知识目标：了解什么是Vue及其工作原理。技能目标：能够配置Vue的开发环境，完成Vue项目创建，熟练使用VisualStudioCode开发工具。素质目标：培养学生解决问题的能力，培养学生实践操作能力。任务准备：一、Vue的概念

Vue是指一个用于构建用户界面的渐进式框架，具有许多独特的功能和优势，它采用组件化的方式来构建用户界面，并且允许开发人员创建可重复使用的组件。这种方法可以极大地简化代码，并提高Web应用程序的可维护性和可重复性，它可以更好地组织与优化程序开发，Vue的核心库只关注视图层，非常容易与其他库或已有项目进行整合，比较容易学习。任务准备：二、Vue的工作原理Vue的数据驱动是通过MVVM（Model-View-ViewModel）模式来实现的，其基本工作原理如图8.1所示。从图8.1中可以看出，MVVM主要包含三个部分，分别是数据（model）、视图（view）和视图模型（viewmodel）。数据部分主要负责业务数据；视图部分属于DOM，主要负责视图的处理；视图模型是连接视图与数据的数据模型，负责监听数据和视图的修改。在MVVM架构下，数据和视图之间并没有直接的联系，而是通过视图模型进行交互，数据和视图模型之间的交互是双向的，因此视图的变化会同步到数据中，而数据的变化也会立即反应到视图上。任务实施：

任务描述：进入Node.js官方网站/en，如图8.2所示，下载Node.js，要求Node.js版本为1.6版本或更高版本。创建Vue项目，项目名称为“vue_project”。任务实施：实施步骤：1.安装Node.js。2.打开命令提示符程序（cmd），定义Vue项目存储位置为“D:\教学\项目八”。

如图8.3所示。3.在cmd中，输入命令行“npminitvue@latest”。

该命令是用于初始化一个新的Vue.js项目，点击回车，出现如图8.4所示提示信息。4.输入项目名称“vue_project”。

注意项目名称不能含有大写字母，如图8.5所示。任务实施：其他选项的含义如下，可以选中默认的“No”。AddTypeScript?含义：是否使用TypeScript语法?AddJSXSupport?含义：是否启用JSX支持?AddVueRouterforSinglePageApplicationdevelopment?含义：是否引入VueRouter进行单页面应用开发?AddPiniaforstatemanagement?含义：是否引入Pinia用于状态管理?AddVitestforUnitTesting?含义：是否引入vitest用于单元测试?AddanEnd-to-EndTestingSolution?含义：是否要引入一款端到端(EndtoEnd)测试工具?AddESLintforcodequality?含义：是否引入ESLint用于代码质量检测?任务实施：5.进入项目vue_project，安装所需依赖包。

在cmd中，输入“cdvue_project”，进入vue项目。输入“npminstall”，安装依赖包。如图8.6所示。如果需要卸载依赖包，我们用到的命令是“npmuninstall”。图8.6cmd界面4任务实施：6.运行项目vue_project。

在cmd中，输入“npmrundev”，运行项目vue_project。当出现图8.7所示的页面时，表示“vue_project”已经运行起来了。其中，“Local:http://localhost:5173/”就是当前项目的访问地址。图8.7cmd界面5任务实施：7.在浏览器中访问Vue项目。

打开浏览器，输入地址“http://localhost:5173/”，当出现图8.8所示的页面时，表示Vue项目已经创建成功。图8.8浏览器页面任务实施：8.安装开发环境VisualStudioCode+Volar扩展。

在官网下载软件“VisualStudioCode”并安装，点击左侧工具栏“Extensions”按钮，搜索“VueLanguageFeatures(Volar)”插件，单击安装后，如图8.9所示。9.VisualStudioCode开发环境界面如图8.10所示。

安装好开发环境，就可以进行Vue项目的开发了。图8.9Volar插件安装界面图8.10VisualStudioCode开发环境界面

小结初识Vue

一、Vue的概念

二、Vue的工作原理

三、搭建Vue的开发环境，创建Vue项目任务测试：一、选择题1、下列选项中，安装Vue模块正确的命令是（）。A、npminstallvueB、node.jsinstallvueC、nodeinstallvueD、npmmyvue2、MVVM架构主要包含三个部分，其中不包括（）。A、数据（Model）B、视图（View）C、视图模型（viewModel）D、Message3、下面选项中，用于卸载指定包依赖的命令是（）。A、npminstallB、node.jsuninstallC、nodeinstallD、npmuninstall4、在MVVM设计模式中，Model代表的是(