Vue.js 3.x前端开发技术与实战 课件 第13章Vue3+Element Plus实战

教学目标掌握VueCLI创建项目的方法。学会配置实际项目中路由。学会使用Vuex来解决实际工程项目中数据共享问题。学会安装与使用ElementPlus组件库。1第13章Vue3+ElementPlus实战—简易图书管理系统213.1简易图书管理系统需求

图书管理系统是最常见的应用系统，可以采用各种编程语言来开发。本章以图书添加、查询和删除等作为基本功能，通过Vue3、ElementPlus、Vuex和VueRouter来实现状态数据存储和路由导航。13.1.1简易图书管理系统功能

简易图书管理系统功能主要有网站首页轮播图展示、图书管理（图书添加、图书查询、图书删除）、首页设置（完成轮播图显示方式和指示器位置的设置）、关于我们等基本功能。如图13-1所示。

实现功能要求如下：

首页：采用ElementPlus中布局容器来进行页面布局，左侧采用Menu菜单组件设计导航，右侧分为页眉、主体和页脚。主体部分采用Carousel走马灯实现轮播显示4幅图像。

图书管理：包含3个子菜单，分别为图书添加、图书查询、图书删除。

图书添加采用Form表单组件实现图书信息输入，并添加到Store仓库中，共享给其它模块使用，并采用Table表格组件显示已有图书信息。

图书查询可以按图书名称、作者姓名、出版社名称来查询，输入查询内容后，表格输出满足查询条件的图书信息。

图书删除采用Table表格组件显示图书信息，通过自定义列模板来定义操作，添加删除按钮，监听单击事件，删除前通过消息弹框再次进行确认后执行删除操作。

首页设置：主要完成首页轮播图显示方式和指示器的位置。

关于我们：主要用于展示项目采用的主要技术和相关组件的使用情况。313.1.2简易图书管理系统实现技术

本项目采用Vue3.2+VueCLI5+VueRouter4+Vuex4+ElementPlus等技术与插件实现完成。

其中ElementPlus组件库中使用Basic基础组件（Container布局容器、Button按钮、Icon图标）、Form表单组件(Form表单、DatePicker日期选择器、Input输入框、Radio单选框)、Data数据展示组件(Table表格、Badge徽章、Carousel走马灯)、Navigation导航(Menu菜单、Breadcrumb面包屑)、Feedback反馈组件(Message消息提示、MessageBox消息弹框)、Others其他（Divider分割线）。413.2.1项目创建

【例13-1】采用VueCLI5创建项目vue-ep-r-vuex-13-1。在命令行状态下，执行以下命令：vuecreatevue-ep-r-vuex-13-1在对话界面时选择Babel、Vuex、Router等特性，执行完成后，进入项目文件夹。执行以下命令：cdvue-ep-r-vuex-13-1npminstallelement-plus–Dnpmrunserve13.2.2定义main.js

在main.js文件中采用完整引入ElementPlus组件，并使用ElementPlus，同时导入ElementPlus样式文件。当然也可以按需引入。完整引入代码参考如下：13.2简易图书管理系统实现import

{

createApp

}

from

"vue";

import

App

from

"./App.vue";

import

router

from

"./router";

import

store

from

"./store";

import

ElementPlus

from

"element-plus";

import

"element-plus/dist/index.css";

createApp(App).use(ElementPlus).use(store).use(router).mount("#app");

13.2.3修改App.vue组件

将原来组件的内容删除，导入并使用BookView组件。BookView组件作为项目的主显示组件。513.2.4定义BookView组件

BookView组件主要采用ElementPlus组件库中Basic基础组件中的Container布局容器来完成项目页面布局设计。页面布局如图13-2所示。然后使用Menu菜单设计侧栏导航，并为每个导航菜单项配置图标。13.2.5定义Header.vue组件

在Header.vue中使用面包屑，并使用ArrowRight作为分隔符。在el-breadcrumb-item组件上绑定to属性，设置路由（对象）。使用弹性布局将logo和标题分别居左、居右对齐，中间为空div。实现代码如下：<divclass="flex"><imgsrc=""/><divclass="flex-grow"></div><span></span></div>/*容器div样式为flex*/.flex

{

display:

flex;

}

/*用于分隔的内嵌空容器div样式为flex-grow:

1*/.flex-grow

{

flex-grow:

1;

}

13.2简易图书管理系统实现613.2.6定义Footer.vue组件Footer.vue组件用于显示版权信息。代码如下：<template>

<p

align="center">Web技术大学图书馆©版权所有。2023-2033</p>

</template>

<style>

.el-footer

{

background-color:

#fefef0;

}

</style>

13.2.7定义router/index.js

在index.js中，主要是完成路由表、路由、路由器的定义，导入路由组件，默认导出路由器。根据项目需要在路由中通过children属性设置嵌套子路由。13.2.8定义store/index.js

在state对象中分别定义books数组（初始化5本图书信息，包括bookno、date、bookname、author、press、price等属性）、index（保存新添加图书的序号）、carouselType（走马灯的类型，默认为一般模式）、indicatorPosition（指示器的位置，默认内部）。在mutations中定义5个mutation，分别为addIndex(state)（产生下一个书序号）、addOneBook(state,oneBook)（添加一本书进库，oneBook是一个对象）、deleteOneBook(state,index)（删除指定索引位置上图书信息）、changeCarouselType(state,type)（更新走马灯显示类型）、changeIndicatorPosition(state,position)（更新走马灯指示器的位置）。13.2简易图书管理系统实现713.2.9定义HomeView.vue组件HomeView.vue组件用于显示轮播图，采用Carousel走马灯组件来实现4幅图轮播。从Store中获取共享数据carouselType、indicatorPosition，分别用于控制轮播图的显示类型和指示器的位置。组件中获取静态资源的方法，采用process.env.BASE_URL返回公共基础路径。代码如下：//

设置公共路径，供静态资源使用

const

publicPath

=

ref(process.env.BASE_URL);

13.2.10定义SettingView.vue组件SettingView.vue组件用于设置首页轮播图显示方式和指示器的位置。通过mit()提交mutation来更新Store中的状态。其中走马灯的显示方式为一般模式、卡片模式。指示器的位置分为默认内部、外部、不显示。13.2简易图书管理系统实现813.2.11定义AboutView.vue组件AboutView.vue组件主要用于展示项目所采用的技术与组件使用情况。组件中使用编程式导航router.push("/")实现“返回首页”的功能。13.2.12定义BookAdd.vue组件BookAdd.vue组件用于采集图书信息，并通过Form表单组件完成图书信息采集，其中书号为字符串，如“b-000001”,“b-”为前缀，后面紧跟6位数字字符，表示序号，序号由状态index记载，每增加1本，自动累进1。并写入Store中state对象中,供查询和删除模块使用，同时将books状态中所有图书通过Table表格组件（带边框、流体高度250px）展示在当前页面上。Table表格组件需要设置有边框、流体高度250px，绑定data属性，值为tableData。tableData为计算属性，从Store.state中获取books状态。采用徽章el-badge组件来显示图书总册数，实现动态、实时更新册数。13.2简易图书管理系统实现913.2.13定义BookModify.vue组件

BookModify.vue组件用于删除图书信息，通过Table表格组件（带边框、流体高度250px）来展示状态books中的所有图书，在自定义列模板中定义“删除”操作，如图13-6所示。通过ElMessageBox消息弹框组件输出确认信息框，如图13-7所示，确认则删除，取消则不做任务操作。通过ElMessage组件输出消息，如图13-8所示。删除图书信息需要更新books状态，同时更新徽章组件上显示的图书册数。13.2简易图书管理系统实现1013.2.14定义BookQuery.vue组件

BookQuery.vue组件用于查询图书信息。先选择查询方式，支持按图书名称、作者和出版社查询所需图书，然后在搜索框中输入相关查询信息，根据输入信息自动从状态中获取满足查询条件的图书信息。通过Table表格组件（带边框、流体高度250px）来展示所选图书信息，如图13-９和图13-10所示。在自定义列模板中定义“查看”操作通过ElMessage组件输出消息，如图13-11所示。

组件中使用带颜色和大小的图标和前置搜索图标（:prefix-icon="Search"

）。语法如下：<el-icon

color="green"

size="20">

<CircleCheck

/></el-icon>

<el-input

v-model="search"

size="default"

placeholder="根据方式输入检索信息"

:prefix-icon="Search"

clearable

/>

import

{Search,

CircleCheck

}

from

"@element-plus/icons-vue";

13.2简易图书管理系统实现11本章建议直接项目实战讲解。也可以作为课程实训大作业，通过指导学生实训，完成整个项目的搭建与功能实现。采用VueClI和Vite两种构建工具来实现项目的所有功能，也可以再适当增加一些功能，让学生完成，根据实际需要再去做一些功能细化。13.2简易图书管理系统