《循序渐进Vue.js前端开发实战》电子书学习-第10章-基于v3的ui组件库：element plus_循序渐进vue.js 3前端开发实战配套ppt和源代码-CSDN博客

本文链接：https://blog.csdn.net/m0_46614929/article/details/131169616

实际的开发过程中，需要结合各种基于vue框架开发的第三方模块来完成项目。以直接的UI展现为例，通过使用基于vue的组件库，可以搭建功能强大、样式美观的页面。

element plus框架是vue开发里非常流行的一款UI组件库，其可以带给用户全网一致的使用体验、目的清晰的控制反馈等。其内置了非常丰富的样式和布局框架。

element plus入门

element plus可以直接使用CDN的方式进行引入，单独的使用其提供的组件和样式，这和渐进式风格的vue框架十分类似，同样也可以使用npm在vuecli创建的模板工程中依赖element plus框架进行使用

element plus的安装和使用

如果我们在开发简单的静态页面的时候采用了cdn的方式引入了vue框架，那么也可以用同样的方法来引入element plus框架

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="Application" style="text-align: center;">
  <h1>这是模板的内容：{{count}}</h1>
  <button v-on:click="clickButton">按钮</button>
  </div>
  <script>
    const App={
      data() {
        return {
          count:0
        }
      },
      methods: {
        clickButton(){
          this.count++
        }
      },
    }
    Vue.createApp(App).mount("#Application")
  </script>
</body>
</html>

为其加上element plus样式，首先在head引入框架

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
  <script src="https://unpkg.com/vue@next"></script>
</head>

好像不太兼容，没有正确显示在页面，看了一下element plus的网站，确实是改变了cdn的链接了

那么尝试使用在工程里使用，运行

npm i elemnet-plus --save

依赖已经添加了

 "dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "element-plus": "^2.3.6",
    "vue": "^3.2.13",
    "vue-axios": "^3.5.2"
  },

可以尝试修改一下helloworld.vue里的代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-empty description="description" />
  </div>
</template>

发现改了是没有效果的，又看了一下官网，需要引入一下，在main.js里面改一下

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

效果就有了：

按钮组件

element plus里面有许多el-button，组件中提供了很多属性来对按钮的样式进行定制

Button 按钮 | Element Plus更多介绍参考官方文档

size	button size	`enum`	—
type	button type	`enum`	—
plain	determine whether it's a plain button	`boolean`	false
text 2.2.0	determine whether it's a text button	`boolean`	false
bg 2.2.0	determine whether the text button background color is always on	`boolean`	false
link 2.2.1	determine whether it's a link button	`boolean`	false
round	determine whether it's a round button	`boolean`	false
circle	determine whether it's a circle button	`boolean`	false
loading	determine whether it's loading	`boolean`	false
loading-icon	customize loading icon component	`string` / `Component`	Loading
disabled	disable the button	`boolean`	false
icon	icon component	`string` / `Component`	—
autofocus	same as native button's `autofocus`	`boolean`	false
native-type	same as native button's `type`	`enum`	button
auto-insert-space	automatically insert a space between two chinese characters	`boolean`	—
color	custom button color, automatically calculate `hover` and `active` color	`string`	—
dark	dark mode, which automatically converts `color` to dark mode colors	`boolean`	false
tag 2.3.4	custom element tag	`string` / `Component`	button

标签组件

标签组件和按钮组件是很类似的

el-tag

Tag 标签 | Element Plus

可以设置标签的类型风格、尺寸、是否描边、背景色、主题、标签是否可关闭、是否禁用渐变动画等

空态图和加载占位符组件

当页面没有数据或者页面在加载数据的时候，需要一个空态图或者占位符来提示用户，这两种情况分别是el-empty和el-skeleton组件

el-empty用来定义空态图组件，当页面没有数据的时候，可以使用此组件进行占位提示

el-empty组件还提供了插槽，可以很灵活的定制所需的空态图的样式，

图片和头像组件

el-image组件，相比于原生的image标签，这个组件封装了一些加载过程的回调和处理相关占位图的插槽

表单类组件

表单类组件一般只可以进行用户的交互，可以根据用户的操作而改变页面逻辑的相关组件。element plus对常用的交互组件都有封装，例如单选框、多选框、选择列表、开关等。

单选框和复选框

el-radio是用来定义单选框的，同属一组的单选框其v-model需要绑定到相同的组件属性上，当选中某个选项的时候，属性对于的值设置为单选框label设置的值

el-checkbox是复选框组件，用法和单选框是类似的，

标准输入框组件

el-input是一种非常复杂的UI组件，提供了非常多的属性供开发者来进行定制。输入框一般用来展示用户的输入内容，可以使用v-model进行数据绑定，

带推荐列表的输入框组件

这种组件是当激活了某个输入框的时候，其会自动弹出推荐列表供用户来进行选择，这种组件叫做el-antocomplete组件

数字输入框

数字输入框专门用来输入数字，例如在电商网站购物会遇到梳理的选择、商品尺寸的选择。el-input-number可以用来创建数字输入框

选择列表

选择列表可以提供一组选项供用户进行选择，可以单选也可以多选，是用el-select来创建的

多级列表组件

el-select组件创建的选择列表是单列的，但是很多时候需要使用多级的选择列表，可以通过el-cascader组件来支持

开关和滑块组件

开关如其名，有开和关这两种的状态来支持用户的交互。在element plus里使用el-switch来创建开关组件，如果想要使用连续状态的组件，可以使用el-slider组件，这个组件能够渲染出进度条和滑块，用户可以对进度进行调节

开关组件

el-switch组件支持开发者定义开关的颜色和背景色

滑块组件

滑块可以支持承载连续变化的值，也支持承载离散变化的值。滑块也可以支持结合输入框一起使用，el-slider组件

选择器组件

选择器组件的使用场景和选择列表类似，只是其场景更加定制化，element plus提供时间日期、颜色相关的选择器

时间选择器

el-time-picker可以用来床事件选择器，能方便的供用户选择一个时间点或时间范围，这个组件的时间选择器的样式是表格类型的，还有一个el-time-select组件，渲染出的选择器是列表样式的

日期选择器

el-data-picker

颜色选择器

颜色选择器可以提供一个调色板组件，用户方便的在调色板上进行颜色的选择。el-color-picker

提示类组件

提示类组件包括有警告组件、加载提示组件、消息提醒组件、通知和弹窗组件等

警告组件

用来展示页面的重要提示信息、页面产生错误、用户交互处理产生失败等的场景，警告组件使用el-alert，有四种类型，分别可以在操作成功提示、普通信息提示、行为警告和操作错误提示场景，更换type类型即可完成场景的切换

el-alert是一种常驻的提示组件，除非用户手动单击关闭，否则提示框是不会自动关闭的，悬浮式的提示组件是另外部分

消息提示

主动触发消息提示的方法：当触发消息提示的时候，页面顶部会出现一个提示栏，展示三秒后会自动消失。

element plus为vue里面的app.config.globalPropertier全局注册了$message方法，因此在vue组件内部，可以直接使用this来触发消息提示，此方法适用于对用户进行简单提示的场景，如果需要进行用户交互，就需要用到提供的另外一个方法$msgbox，这个方法触发的提示框效果是类似于系统的alert、confirm和prompt方法，可以进行用户交互

通知组件

通知是可以用来全局的进行系统提示，可以像消息提醒一样在出现一定事件后自动关闭，也可以像提示栏一样常驻，用户手动才能关闭。$notify来触发通知

数据承载相关组件

数据承载组件例如表格组件、导航组件、卡片和折叠面板组件等，这些组件是用来组织页面的数据

表格组件

表格组件能够承载大量的数据信息，在实际开发中，需要展示大量数据的页面都会使用到表格组件，el-table-column和el-table组件

导航菜单组件

导航组件名为页面提供导航功能的菜单，出现在页面的顶部或者侧部，点击导航组件上不同的栏目页面就会对应跳转到指定页面。el-menu、el-submenu、el-menu-item来定义导航组件、

标签页组件

标签页组件可以用来将页面分割成几部分，单击不同标签可以实现页面内容切换。使用el-tabs来创建

抽屉组件

这是一种全局的弹窗组件，当用户打开抽屉组件的时候，能够从页面的边缘滑出一个内容面板，可以灵活定制内容面板来实现产品的需求el-drawer

布局容器组件

布局容器是用来方便快速的搭建页面基本结构的，一般网页都是由头部模块、尾部模块、侧栏模块和内容模块

el-container创建布局容器，如何内部的子元素一般是el-header、el-aside、el-main、el-footer。第一个是定义头部模块，如其名。

实战：教务系统学生列表页面

本章节的ui组件每个都有很多属性，感觉还是用的时候再来查看吧，记忆下来实属有点困难。尝试编写一个简单的学生列表页面，运用一下表格组件、容器组件和导航组件

首先考虑一下页面的布局，页面由三部分构成，顶部标题框展示当前页面的名称，左侧的侧边栏用来进行年级和班级的选择，中间的内容分为上下两部分，上面分为标题栏，用来显示一个控制哦按钮例如新增、搜索学生信息，下面为当前班级的完整的学生列表，展示的信息有名字、年龄、性别和添加信息的日期等，html的内容模板代码如下

<template>
  <el-container>
    <el-header height="80px" style="padding: 0;">
    <div>教务系统学生管理</div>
  </el-header>
  <el-container>
  <el-aside width="200px">
    <el-menu class="aside" @select="selectFunc" default-active="1" :unique-opened="true">
      <el-submenu index="1">
        <template #title>
          <span>
            七年级
          </span>
        </template>
        <el-menu-item index="1">1班</el-menu-item>
        <el-menu-item index="2">2班</el-menu-item>
        <el-menu-item index="3">3班</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template #title>
          <span>
            八年级
          </span>
        </template>
        <el-menu-item index="4">1班</el-menu-item>
        <el-menu-item index="5">2班</el-menu-item>
        <el-menu-item index="6">3班</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template #title>
          <span>
            九年级
          </span>
        </template>
        <el-menu-item index="7">1班</el-menu-item>
        <el-menu-item index="8">2班</el-menu-item>
        <el-menu-item index="9">3班</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
  <el-container>
    <el-header height="80px" style="padding:0;margin:0">
    <el-container class="subHeader">
      <div class="desc">{{ desc }}</div>
      <el-button style="width:100px;height:30px;margin: 20px;">新增记录</el-button>
    </el-container>
    </el-header>
    <el-main style="margin: 0;padding:0;">
    <div class="content">
      <el-table :data="stus">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="date" label="录入时期"></el-table-column>
      </el-table>
    </div>
    </el-main>
    <el-footer height="30px" class="footer">vue框架搭建，elementplus提供组件支持</el-footer>

  </el-container>
</el-container>
</el-container>
</template>

CSS代码

<style scoped>
.header{
  font-size: 30px;
  line-height:80px;
  background-color: #f1f1f1;
}
.aside{
  background-color: wheat;
  height: 600px;
}
.subHeader{
  background-color: cornflowerblue;
}
.desc{
  font-size: 25px;
  line-height: 80px;
  color: white;
  width: 800px;
}
.content{
  height: 410px;
}
.footer{
  background-color: dimgray;
  color: white;
  font-size: 17px;
  line-height: 30px;
}
</style>

完成js代码，提供测试数据实现菜单交互逻辑

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      desc: "七年级1班学生统计",
      stus: [
        {
          name: "小王",
          age: 14,
          sex: "男",
          date:"2020.8.15"
        }, {
          name: "小张",
          age: 15,
          sex: "男",
          date:"2020.5.15"
        }, {
          name: "小秋",
          age: 14,
          sex: "女",
          date:"2020.8.15"
        }
      ]
    }
  },
  methods: {
    selectFunc(index) {
      let strs = ["七", "八", "九"]
      let rank = strs[Math.floor((index - 1) / 3)]
      this.desc=`${rank}年级${((index-1)%3)+1}班学生统计`
    }
  },
}
</script>

效果