JavaScript+Vue.jsWeb开发实战教程课件 第六章 Vue.js概述

Vue.js概述演讲人：XXXXXXJavaScript+Vue.jsWeb开发实战教程06学习目标掌握Vue的使用方法掌握Vue开发环境的安装与配置掌握创建Vue项目的方法能够学会Node.js的安装方法能够学会开发Vue项目思维导图6.1Vue简介Vue（读音为/vjuː/，类似view）是一款用于构建用户界面的JavaScript框架。Vue基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue适用于各种规模的应用开发，从简单的单页面应用到复杂的企业级应用。Vue的组件化编程模型、高效的性能以及强大的生态系统使其成为前端开发领域的热门框架之一。6.1.1使用Vue的优势在使用Vue时，开发者可以根据项目的实际需要使用它的功能。使用Vue进行项目开发具有以下优势。

Vue通过虚拟DOM技术减少对DOM的直接操作，并通过尽可能简单的应用程序接口（ApplicationProgramInterface，API）实现响应式的数据绑定，而且支持单向数据绑定和双向数据绑定。04Vue支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于团队的协同开发。05Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程化开发，从而提高项目的开发效率，降低大型项目的开发难度。06轻量级。Vue是一个轻量级的前端开发框架，文件体积小。01Vue项目基于JavaScript开发，熟悉JavaScript的开发者不用再学一种陌生的语言，因此Vue具有较低的学习门槛。02Vue在使用上比较灵活，开发者可以选择使用Vue开发一个全新的项目，也可以将Vue引入现有项目。03Vue是基于模型-视图-视图模型（Model-View-ViewModel，MVVM）模式的框架。其中，Model是指数据部分，负责业务数据的处理；View是指视图部分，即用户界面，负责视图处理；ViewModel用于连接视图与数据，负责监听Model或者View的改变。6.1.2Vue的特性在使用了Vue的页面中，Vue会监听数据的变化，当页面上的数据发生变化时，Vue会自动重新渲染页面结构。数据驱动视图如图所示。数据驱动视图01Vue实现了双向数据绑定，即当页面上的数据发生变化时，视图也会同步变化；当视图发生变化时，页面上的数据也会同步变化。例如，当用户填写表单时，双向数据绑定可以辅助开发者在无须手动操作DOM的前提下，自动同步用户填写的内容数据，从而获取表单元素最新的值。双向数据绑定02图

数据驱动视图6.1.2Vue的特性指令主要包括内置指令和自定义指令，其中，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。指令的名称以“v-”开头，作用于HTML页面中的元素。当指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind指令用于实现单向数据绑定，v-if指令用于实现页面条件渲染，v-for指令用于实现页面列表渲染等。指令03Vue使用工程化开发方式，支持安装第三方插件，通过加载插件可以实现不同的功能。常用的插件有VueRouter（路由）、Vuex（状态管理库）、Pinia（轻量级状态管理库）等，这些插件都是Vue作者开发的，经过简单配置就可以使用，能够进一步扩展和丰富Vue的功能。插件046.1.3Vue的版本目前，Vue共有3个大版本，分别是Vue1、Vue2和Vue3。其中，Vue1几乎被淘汰，因此不建议学习与使用；Vue2和Vue3目前被广泛应用，并且Vue3将会逐步替代Vue2。Vue3新增的功能包括组合式API（compositionAPI）、多根节点组件等，废弃的功能包括过滤器（filter）以及$on()、$off()和$once()等实例方法。Vue3中的新特性如下。体积更小。Vue3采用按需编译的方式编译出来的文件体积比Vue2的小。性能提升。Vue3的运行速度比Vue2更快。具有更好的TypeScript支持。暴露了更底层的API，可以通过多种方式组织代码，代码使用更加灵活。提供了更先进的组件。Vue3创建了一个虚拟的Fragment节点，允许组件中有多个根节点。提供了组合式API，能够更好地组合逻辑、封装逻辑、复用逻辑。6.1.3Vue的版本为了提高开发效率，开发者可以在项目中添加用户界面（UserInterface，UI）组件库。UI组件库可以理解成一个可重复使用的界面设计元素的集合体，使用其可以更快速地开发UI。目前，主流UI组件库已经发布了支持Vue3的版本。常用的UI组件库如下。ElementPlus组件库：一款基于Vue3的桌面端组件库。Vant组件库：一款开源移动端组件库，其从3.0版本开始支持Vue3。AntDesignVue组件库：一款用于开发企业级后台产品的组件库，其从2.0版本开始支持Vue3。6.2.1Node.js环境在创建Vue项目时，需要用到Node.js。Node.js是一个基于V8引擎的JavaScript运行环境，提供了一些功能性的API，如文件操作API、网络通信API等。打开Node.js官网，找到Node.js的下载地址，如图所示。从图可见，Node.js有两个版本，分别是长期支持版本和最新版本。其中，长期支持版本只进行bug修复且版本稳定，因此有很多用户使用；最新版本增加了一些新特性，有利于进行新技术的开发和使用。这里以Windows安装包为例，选择下载22.18.0长期支持版本，下载完成后会得到node-v22.18.0.-64.msi安装文件。Node.js的安装步骤如下。图Node.js官网6.2.1Node.js环境step01双击node-v22.18.0.-64.msi安装文件，打开安装向导窗口，如图所示，单击“Next”按钮。step02在软件许可协议界面中查看软件许可协议并勾选接受复选框，如图所示，单击“Next”按钮。图

安装向导窗口图

软件许可协议界面6.2.1Node.js环境step03根据界面提示，选择合适的安装位置、设置常规配置选项等，逐步完成Node.js的安装。step04安装成功界面如图所示，单击“Finish”按钮。图Node.js安装成功图

安装成功界面step05打开终端，输入“node-v”命令，查看Node.js版本，出现版本号代表Node.js安装成功，如图所示。6.2.2常见的包管理工具npm是Node.js的默认包管理工具，其可以安装、共享、分发代码，还可以管理项目的依赖关系。在安装Node.js时会自动安装相应版本的npm，不需要单独安装。在终端执行npm-v命令，可以查看npm的版本，如图所示。使用npm包管理工具可以满足以下场景的需求。npm01图

查看npm的版本从npm服务器下载别人编写的第三方包到本地使用。从npm服务器下载并安装别人编写的命令行程序到本地使用。将自己编写的包或命令行程序上传到npm服务器供别人使用。npm中常用的命令如下。npminstall包名：可简写为“npmi包名”，用于为项目安装指定名称的包。加上“-g”，安装为全局包。npmuninstall包名：卸载指定名称的包。npmupdate包名：更新指定名称的包。6.2.2常见的包管理工具为npm设置镜像服务器地址的具体命令如下。npmconfigsetregistry为了验证镜像服务器地址是否设置成功，可以执行如下命令。npmconfiggetregistryyarn是Node.js的包管理工具，其是一个高效、安全和可靠的包管理工具。使用yarn能够提高包的安装效率，节约安装时间。在使用yarn之前，需要先确保计算机中已经安装了Node.js环境，再使用npm命令安装yarn，安装命令如下。yarn02npminstallyarn-g执行yarn-v命令，查看yarn的版本，如图所示。为yarn设置镜像服务器地址的具体命令如下。图

查看yarn的版本yarnconfigsetregistry6.2.2常见的包管理工具为了验证镜像服务器地址是否设置成功，可以执行如下命令。yarnconfiggetregistry下面是yarn中的一些常用命令。yarninstall：可简写为“yarn”，用于为项目安装所有需要的包。如果提供了“-g”选项，则会把包安装为全局包，否则只安装到本项目中。yarnremove包名：卸载指定名称的包。yarnupdate包名：更新指定名称的包。yarnadd包名：添加指定名称的包。npm和yarn都是包管理工具，但二者有一些区别，具体如下。使用npm安装同一个包时，每次安装都需要重新下载；而yarn会缓存每个下载过的包，再次安装时无须重复下载。npm按照队列安装每个包，要等到当前包安装完成后，才能继续安装后面的包；而yarn可以利用并行下载方式提高资源利用率，安装速度更快。npm的输出信息比较冗长，执行npminstall命令后，终端会输出所有被安装的包的信息。相比之下，yarn的输出信息更简洁，执行yarn命令后只输出必要的信息，同时提供一些命令供开发者查询其他安装信息。6.2.3安装VSCode扩展程序Vue(Official)专门用于为.vue单文件组件（Single-FileComponent，SFC）提供代码高亮显示和语法支持。该扩展程序仅适用于Vue3项目，其不仅提供了语法高亮显示、智能提示、错误提示、格式化等功能，而且支持多根节点组件。如果想要安装Vue(Official)扩展程序，可以在扩展程序界面的输入框中输入关键词“Vue(Official)”，搜索Vue(Official)扩展程序，进行安装，如图所示。注意：在Vue2中不能使用Vue(Official)扩展程序，而是使用Vetur扩展程序，可以在扩展程序界面的输入框中输入关键词Vetur，搜索到Velur扩展程序后进行安装。图Vue(Offical)扩展程序6.3.1Vite概述Vite（读音为/vit/）是一个轻量级、运行速度快的前端构建工具，其支持模块热替换（HotModuleReplacement，HMR），可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。在项目启动时，Vite会对模块代码进行按需加载，启动速度更快。因此，当使用Vue3开发新项目时，推荐使用Vite进行项目创建。Vite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。注意：Node.js必须为14.18及以上版本时才可以使用Vite，并且Vite中的部分模板需要在更高的Node.js版本上才能正常运行。6.3.2创建Vue3项目Vue3提供了创建项目的命令，使用npm或yarn包管理工具的命令可以创建项目，具体命令如下。#使用npmcreate命令创建项目npmcreatevue@latest#使用yarncreate命令创建项目yarncreatevue@latestnpmcreate和yarncreate命令后跟vue@latest（表示在npm中安装最新版本的Vue3），表示初始化Vue3项目。接下来通过实际操作演示如何手动创建Vue3项目，具体步骤如下。step01打开终端，进入一个目录，执行如下命令，Vue3会提示“请输入项目名称：”，如图所示。npmcreatevue@latest可以自定义项目名称，也可以使用默认的项目名称vue-project，这里直接按“Enter”键使用默认的项目名称vue-project即可。图

提示“请输入项目名称：”6.2.1Node.js环境step02使用vue-project作为项目名称后，Vue3会列出需要安装的第三方包，通过按下方向键可以切换不同包名称的选中状态。如果需要某包，就在该包名称处于选中状态时按“spacs”键，使前面的方框变为填充状态。这里选中Router（单页面应用开发）、Pinia（状态管理）、ESLint（错误预防）和Prettier（代码格式化）几个包，如图所示，按“Enter”键。图

选中需要的包图

提示“是否引入Oxlint以加快检测？”step03Vue会提示“是否引入Oxlint以加快检测？”，在这里选择“No”，如图6.13所示，按“Enter”键step04依次执行cdvue-project、npminstall、npmrunformat和npmrundev命令，启动项目，如图所示。图

依次执行命令以启动项目6.2.1Node.js环境当出现图所示的界面时，说明项目启动成功，随后可以在浏览器中通过http://localhost:5173/打开对应网页，查看Vue3项目，如图所示。图

项目启动成功step05图

查看Vue3项目6.3.3Vue3项目目录Vue3项目创建成功后，可以在VSCode中看到一个默认生成的项目目录，如图所示。下面简要介绍图所示的主要目录和文件的作用，具体如下。主要目录文件的作用.vscode存放VSCode的相关配置node_modules存放项目的各种依赖和安装的插件public存放不可编译的静态资源文件。在进行项目构建时，该目录下的文件会被复制到dist目录。该目录下的文件需要使用绝对路径访问。src源代码目录，保存开发者编写的项目源代码。src/assets存放可编译的静态资源文件，如图片、样式文件等。该目录下的文件需要使用相对路径访问。src/components存放单文件组件，即.vue文件src/App.vue项目的根组件src/main.js项目的入口文件，用于创建Vue应用实例.gitignore向Git仓库上传代码时需要忽略的文件列表index.html默认的主渲染页面文件，同时也是页面的入口文件package.json包配置文件README.md项目使用说明文件vite.config.js存放Vite的相关配置package-lock.json存储每一个依赖的安装版本，在使用npm安装、升级、卸载依赖时，package-lock.json文件会自动更新。图Vue3项目目录6.3.4Vue3项目的运行过程下面以6.3.2小节创建的项目vue-project为例，对src/App.vue文件、index.html文件和src/main.js文件进行代码解析，介绍项目的运行过程。Vue3项目是由各种组件组成的，在根组件src/App.vue中可以引用其他组件，从而显示其他组件的内容。src/App.vue文件的初始代码如下所示。src/App.vue文件01<scriptsetup>

import{RouterLink,RouterView}from'vue-router'

importHelloWorldfrom'./components/HelloWorld.vue'</script><template>

<header>

<imgalt="Vuelogo"class="logo"src="@/assets/logo.svg"width="125"

height="125"/>

<divclass="wrapper">

<HelloWorldmsg="Youdidit!"/>

<nav>

<RouterLinkto="/">Home</RouterLink>

<RouterLinkto="/about">About</RouterLink>

</nav>

</div>

</header>

<RouterView/></template>6.3.4Vue3项目的运行过程<stylescoped>header{

line-height:1.5;

max-height:100vh;}.logo{

display:block;

margin:0auto2rem;}nav{

width:100%;

font-size:12px;

text-align:center;

margin-top:2rem;}nava.router-link-exact-active{

color:var(--color-text);}nava.router-link-exact-active:hover{

background-color:transparent;}nava{

display:inline-block;

padding:01rem;

border-left:1pxsolidvar(--color-border);}nava:first-of-type{

border:0;}@media(min-width:1024px){

header{

display:flex;

place-items:center;

padding-right:calc(var(--section-gap)/2);

}

.logo{

margin:02rem00;

}

header.wrapper{

display:flex;

place-items:flex-start;

flex-wrap:wrap;

}

nav{

text-align:left;

margin-left:-1rem;

font-size:1rem;

padding:1rem0;

margin-top:1rem;

}}</style>6.3.4Vue3项目的运行过程index.html文件中预留了被src/main.js文件中的Vue应用实例所控制的区域。index.html文件的初始代码如下所示。index.html文件02<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8"/>

<linkrel="icon"href="/favicon.ico">

<metaname="viewport"content="width=device-width,initial-scale=1.0">/

<title>ViteApp</title>

</head>

<body>

<divid="app"></div>

<scripttype="module"src="/src/main.js"></script>

</body>

</html>6.3.4Vue3项目的运行过程src/main.js文件创建了Vue3应用实例。Vue3应用实例是Vue3项目的基础，每个Vue3项目都是从创建Vue3应用实例开始的。src/main.js文件的初始代码如下所示。src/main.js文件03import'./assets/main.css'import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'importrouterfrom'./router'constapp=createApp(App)app.use(createPinia())app.use(router)app.mount('#app')需要说明的是，对每个Vue3应用实例来说，仅能调用一次monnt()方法。mount()方法的参数可以是一个实际的DOM元素或一个CSS选择器（使用第1个匹配到的元素）【商业案例】

学生信息管理系统——初始化项目，完成页面布局任务1初始化Vue3项目图

选中需要的包在终端执行yarncreatevue命令，创建Vue3项目，设置项目名称为“student-management”，选中Router（单页面应用开发）、Pinia（状态管理）、ESLint（错误预防）和Prettier（代码格式化）几个包，如图所示。项目创建完成后，会出现相应提示，依次执行图所示的命令。其中，cdstudent-management命令表示切换到student-management目录，yarn命令表示安装项目依赖，yarnformat命令表示格式化项目代码，yarndev命令表示运行项目。图

执行相应命令当执行yarndev命令后，终端会出现图所示的界面，表示vue3项目运行成功。在浏览器的地址栏中输入“http://localhost:5173/”并按“Enter”键，打开网页，会出现图6.20所示的项目初始页面。图Vue3项目运行成功【商业案例】

学生信息管理系统——初始化项目，完成页面布局图Vue3项目初始页面打开源代码，将components目录下的初始代码都删除，将App.vue原先的代码删除，引入IndexComponent组件（后文介绍），如图所示。图App.vue页面代码【商业案例】

学生信息管理系统——初始化项目，完成页面布局任务2拆分页面组件并定义组件的布局和样式图所示为学生信息列表页面实现效果，可以看到页面主要分为3部分，顶部是页面标题“新增”按钮和“删除”按钮，中部是学生信息列表，底部是“上一页”按钮、“下一页”按钮、分页信息和信息数量。首先创建IndexComponent组件，作为页面的代码入口；然后在App.vue中引入该组件；接着分别创建3个组件——HeaderComponent、MainComponent和FooterComponent，它们分别代表页面的顶部、中部、底部3个部分；最后在每个组件中定义各自的布局和样式代码。组件拆分01图6.22学生信息列表页面实现效果（基于Vue3实现）【商业案例】

学生信息管理系统——初始化项目，完成页面布局<scriptsetup>

importHeaderComponentfrom'./HeaderComponent.vue'

importMainComponentfrom'./MainComponent.vue'

importFooterComponentfrom'./FooterComponent.vue'</script><template>

<divclass="wrapperBox">

<header-component/>

<main-component/>

<footer-component/>

</div></template><stylescoped>

.wrapperBox{

width:1229px;

height:645px;

background-color:#f0ece9;

margin:100pxauto;

}</style>在IndexComponent.vue中引入3个子组件，并加上组件的样式。IndexComponent.vue的部分代码如下所示（位置：学生信息管理系统-Vue3版/student-management/src/components/IndexComponent.vue）。在HeaderComponent.vue文件中定义页面标题、“新增”按钮和“删除”按钮，以及对应的布局和样式，代码如下所示（位置：学生信息管理系统-Vue3版/student-management/src/components/HeaderComponent.vue）。HeaderComponent组件02<template>

<divclass="header">

<divclass="headerTitle">

<divclass="headerLine">学生信息管理系统</div>

</div>

<divclass="headerButton">

<buttonclass="addButton">新增</button>

<buttonid="deleteButton">删除</button>

</div>

</div></template><stylescoped>

.header{

width:1200px;

height:111px;

margin:0auto;

}

.headerTitle{

width:1200px;

height:56px;}

.headerLine{

width:1200px;

color:#999999;

text-align:center;

font-size:24px;

}【商业案例】

学生信息管理系统——初始化项目，完成页面布局.headerLine:before,

.headerLine:after{

content:'';

width:406px;

border-top:4px#c3a080solid;

display:inline-block;

vertical-align:middle;

}

.headerLine:before{

margin-right:98px;

}

.headerLine:after{

margin-left:98px;

}

.headerButton{

height:40px;

line-height:40px;

}

.addButton{

width:93px;

height:38px;

background-color:#5cb85c;

border:1pxsolid#000000;

color:#fff;

cursor:pointer;

}【商业案例】

学生信息管理系统——初始化项目，完成页面布局

#deleteButton{

width:93px;

height:38px;

background-color:#d9534f;

border:1pxsolid#000000;

color:#fff;

margin-left:14px;

cursor:pointer;

}</style>【商业案例】

学生信息管理系统——初始化项目，完成页面布局在MainComponent.vue文件中定义学生信息列表的布局以及对应的样式，代码如下所示（位置：学生信息管理系统-Vue3版/student-management/src/components/

MainComponent.vue）。MainComponent组件03<style><template>

<divclass="container">

<tableid="containerTable">

<theadclass="tableHeader">

<tr>

<th><inputtype="checkbox"/></th>

<th>序号</th>

<th>学号</th>

<th>姓名</th>

<th>学院</th>

<th>专业</th>

<th>年级</th>

<th>班级</th>

<th>年龄</th>

<th>操作</th>

</tr>

</thead>

<tbodyid="tdata">

</tbody>

</table>

</div></template><stylescoped>

.container{

width:1200px;

height:455px;

margin:0auto;

font-size:12px;

text-align:center;

}

.containertable{

border-collapse:collapse;

width:100%;

}

.containertd{

height:40px;

color:#000000;

}

.tableHeader{

height:55px;

background-color:#dadee1;

}

.trHover:nth-child(even){

background-color:#ffffff;

}

.trHover:nth-child(odd){

background-color:#eef1f8;

}

.trHover:hover{

background-color:#aef2e5;

}【商业案例】

学生信息管理系统——初始化项目，完成页面布局

i{

font-style:normal;

}

td{

height:40px;

}

.viewInf,

.updateInf{

color:#ff0000;

cursor:pointer;

}

.updateInf{

margin-left:9px;

}</style>在FooterComponent.vue文件中定义“上一页”按钮、“下一页”按钮、分页信息的布局和对应的样式，代码如下所示（位置：学生信息管理系统-Vue3版/student-management/src/components/FooterComponent.vue）。FooterComponent组件04<template>

<divclass="footer">

<divclass="pageInformation">

第<spanid="curPage"></span>页，

共<spanid="countPage"></span>条，

(每页显示10条)

</div>

<divclass="pageButton">

<buttonid="prePageButton">上一页</button>

<buttonid="nextPageButton">下一页</button>

</div>

</div></template><stylescoped>

.footer{

width:1200px;

height:79px;

margin:0auto;

color:#000000;

}

.pageButton{

height:79px;

line-