文章目录*一、ElementPlus介绍* 二、快速入门* * 准备工作 * 制作组件* 三、常见组件* * 表格组件 * 分页条组件 * 对话框组件 * 表单组件* *一、ElementPlus介绍---------------Element是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库用于快速构建网页。Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等。官方网站https://element-plus.org/zh-CN/#/zh-CN 链接: link二、快速入门------### 准备工作1、需要创建一个vue项目。 2、 参照官方文档安装ElementPlus的组件库在当前工程的目录下 在控制台输入这段命令 npm install element-plus --save 3、在main.ts中引入ElementPlus组件库 参照官方文档最终main.ts中代码如下 import { createApp } from ‘vue’ import App from ‘./App.vue’ import ‘./assets/main.css’ import ElementPlus from ‘element-plus’ import ‘element-plus/dist/index.css’ const app createApp(App) app.use(ElementPlus) app.mount(‘#app’) ### 制作组件1、访问ElementPlus的官方文档查看对应的组件源代码。2、在views目录下创建Element.vue组件文件复制组件代码调整成自己想要的 。Default Primary Success Info Warning Danger 3、 启动项目三、常见组件------### 表格组件用于展示多条结构类似的数据 可对数据进行排序、筛选、对比或其他自定义操作。 首先我们需要来到 ElementPlus 的组件库中找到表格组件如下图所示然后新建一个组件Element.vue组件中需要注意的是我们组件包括了3个部分如果官方有除了template部分之外的style和script都需要复制。具体操作如下图所示此时回到浏览器我们页面呈现如下效果Table表格组件属性说明 data: 主要定义table组件的数据模型* prop: 定义列的数据应该绑定data中定义的具体的数据模型* label: 定义列的标题* width: 定义列的宽度### 分页条组件Pagination: 分页组件主要提供分页工具条相关功能。其展示效果图下图所示默认情况下ElementPlus的组件是英文的如果希望使用中文语言可以在main.ts中做如下配置 import zhCn from ‘element-plus/dist/locale/zh-cn.mjs’ app.use(ElementPlus, {locale: zhCn}) 如图所示然后还需要在env.d.ts中增加如下配置项 declare module ‘element-plus/dist/locale/zh-cn.mjs’ 如图所示两个文件在这里然后复制代码到我们的Element.vue组件文件的template中在template /template拷贝如下代码在script /script中拷贝如下代码注意有些代码是没有用到的所以可以删去。打开浏览器查看页面效果如下Pagination 分页组件的属性如下 对于分页组件我们需要关注的是如下几个重要属性可以通过查阅官网组件中最下面的组件属性详细说明得到* background: 添加背景颜色也就是上图蓝色背景色效果。* layout: 分页工具条的布局其具体值包含sizes,prev,pager,next,jumper,total这些值* total: 数据的总数量对于分页组件除了上述几个属性还有2个非常重要的事件我们需要去学习* size-change pageSize 改变时会触发* current-change currentPage 改变时会触发### 对话框组件在保留当前页面状态的情况下告知用户并承载相关操作。 首先我们需要在ElementPlus官方找到Dialog组件如下图所示然后复制如下代码到我们的组件文件Element.vue的template/template模块中然后复制如下代码到我们的组件文件Element.vue的script/script模块中打开浏览器最终的页面效果如下### 表单组件Form 表单由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据。表单在我们前端的开发中使用的还是比较多的接下来我们学习这个组件与之前的流程一样我们首先需要在ElementPlus的官方找到对应的组件示例如下图所示代码依然复制根据需求删除或者新增一些代码。打开浏览器查看页面效果