前端学习教程-ElementPlus 教程

news/2025/10/4 23:08:29/文章来源:https://www.cnblogs.com/smalldong/p/19126054

Element Plus 是基于 Vue 3 的企业级 UI 组件库,提供了丰富的预置组件,可帮助开发者快速构建高质量的前端界面。

一、安装 Element Plus

1. 环境要求

  • Vue 3.0+
  • Node.js 14.0+

2. 安装方式

(1)使用 npm 或 yarn 安装(推荐)

# npm
npm install element-plus --save# yarn
yarn add element-plus

(2)按需安装(减小打包体积)

需要额外安装插件:

npm install unplugin-vue-components unplugin-auto-import --save-dev

二、引入 Element Plus

1. 全局引入(快速开发)

在入口文件(main.js)中全局引入,所有组件可直接使用:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'  // 引入 Element Plus
import 'element-plus/dist/index.css'    // 引入样式
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'  // 引入中文语言包const app = createApp(App)// 使用 Element Plus 并配置语言
app.use(ElementPlus, {locale: zhCn
})app.mount('#app')

2. 按需引入(生产环境推荐)

仅引入需要的组件,减小项目体积。需配置 vite.config.js(Vite 项目):

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [vue(),// 自动导入 Element Plus 相关函数AutoImport({resolvers: [ElementPlusResolver({ importStyle: 'sass' })]}),// 自动导入 Element Plus 组件Components({resolvers: [ElementPlusResolver({ importStyle: 'sass' })]})]
})

三、基础组件使用

1. 按钮(Button)

最常用的交互组件,支持多种样式和状态:

<template><div class="button-demo"><!-- 基础按钮 --><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button><!-- 不同尺寸 --><el-button size="large">大按钮</el-button><el-button size="default">默认尺寸</el-button><el-button size="small">小按钮</el-button><!-- 状态按钮 --><el-button disabled>禁用按钮</el-button><el-button type="primary" loading>加载中</el-button><el-button type="primary" icon="Search">带图标</el-button></div>
</template><script setup>
// 按需引入时无需额外导入,全局引入也可直接使用
</script><style scoped>
.button-demo {display: flex;gap: 10px;flex-wrap: wrap;padding: 20px;
}
</style>

2. 表单(Form)

用于数据收集和验证,包含输入框、选择器等控件:

<template><el-form :model="form" :rules="rules" ref="formRef" label-width="100px"class="form-demo"><el-form-item label="用户名" prop="username"><el-input v-model="form.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input></el-form-item><el-form-item label="性别"><el-radio-group v-model="form.gender"><el-radio label="male">男</el-radio><el-radio label="female">女</el-radio></el-radio-group></el-form-item><el-form-item label="爱好"><el-checkbox-group v-model="form.hobbies"><el-checkbox label="reading">阅读</el-checkbox><el-checkbox label="sports">运动</el-checkbox><el-checkbox label="coding">编程</el-checkbox></el-checkbox-group></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button @click="resetForm">重置</el-button></el-form-item></el-form>
</template><script setup>
import { ref, reactive } from 'vue'// 表单数据
const form = reactive({username: '',password: '',gender: 'male',hobbies: []
})// 表单验证规则
const rules = reactive({username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }]
})// 表单引用
const formRef = ref(null)// 提交表单
const submitForm = () => {formRef.value.validate((valid) => {if (valid) {console.log('表单数据:', form)// 这里可以发送 API 请求} else {console.log('表单验证失败')return false}})
}// 重置表单
const resetForm = () => {formRef.value.resetFields()
}
</script><style scoped>
.form-demo {max-width: 500px;margin: 20px auto;padding: 20px;border: 1px solid #eee;border-radius: 4px;
}
</style>

3. 表格(Table)

用于展示结构化数据,支持排序、筛选、分页等功能:

<template><div class="table-demo"><el-table :data="tableData" border style="width: 100%; margin-bottom: 20px"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="操作" width="200"><template #default="scope"><el-button size="small" @click="handleEdit(scope.row)">编辑</el-button><el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><!-- 分页 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="tableData.length"></el-pagination></div>
</template><script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'  // 引入消息提示组件// 表格数据
const tableData = reactive([{date: '2023-05-01',name: '张三',address: '北京市朝阳区'},{date: '2023-05-02',name: '李四',address: '上海市浦东新区'},{date: '2023-05-03',name: '王五',address: '广州市天河区'}
])// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)// 处理每页条数变化
const handleSizeChange = (val) => {pageSize.value = valcurrentPage.value = 1  // 重置为第一页
}// 处理页码变化
const handleCurrentChange = (val) => {currentPage.value = val
}// 编辑操作
const handleEdit = (row) => {ElMessage.success(`编辑 ${row.name}`)// 实际项目中会打开编辑对话框
}// 删除操作
const handleDelete = (row) => {const index = tableData.findIndex(item => item.name === row.name)tableData.splice(index, 1)ElMessage.success(`已删除 ${row.name}`)
}
</script><style scoped>
.table-demo {max-width: 1200px;margin: 20px auto;padding: 0 20px;
}
</style>

4. 对话框(Dialog)

用于显示弹窗内容,如表单、详情等:

<template><div class="dialog-demo"><el-button type="primary" @click="dialogVisible = true">打开对话框</el-button><el-dialogv-model="dialogVisible"title="示例对话框":width="dialogWidth":before-close="handleClose"><p>这是一个对话框示例</p><el-input v-model="dialogContent" placeholder="请输入内容"></el-input><template #footer><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="handleConfirm">确定</el-button></template></el-dialog></div>
</template><script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'// 控制对话框显示/隐藏
const dialogVisible = ref(false)
// 对话框宽度
const dialogWidth = ref('50%')
// 对话框内容
const dialogContent = ref('')// 关闭对话框前的回调
const handleClose = (done) => {if (dialogContent.value) {done()  // 关闭对话框} else {ElMessage.warning('请输入内容')}
}// 确认按钮回调
const handleConfirm = () => {ElMessage.success(`你输入的内容:${dialogContent.value}`)dialogVisible.value = false
}
</script>

四、主题定制

Element Plus 支持自定义主题,可通过修改 SCSS 变量实现:

1. 安装 SCSS 依赖

npm install sass sass-loader --save-dev

2. 创建主题变量文件

// src/styles/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': #42b983,  // 自定义主色调(Vue 绿色)),),$button-padding: ('default': 8px 20px,  // 自定义按钮内边距)
);

3. 配置 Vite 引入自定义主题

// vite.config.js
export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@use "@/styles/element/index.scss" as *;`,},},},
})

五、国际化

Element Plus 内置多语言支持,默认是英文,可配置为中文或其他语言:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'// 导入语言包
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import ja from 'element-plus/dist/locale/ja.mjs'// 模拟语言切换(实际项目中可结合 store 存储用户选择的语言)
const lang = 'zh-cn'  // 可改为 'en' 或 'ja'const app = createApp(App)// 根据选择的语言设置
const locale = {'zh-cn': zhCn,'en': en,'ja': ja
}[lang]app.use(ElementPlus, { locale })
app.mount('#app')

六、常用组件速查表

组件名 用途 核心属性
el-button 按钮交互 typesizedisabledloading
el-form 数据收集 modelruleslabel-width
el-input 文本输入 v-modelplaceholdertype
el-table 数据展示 databorderheight
el-dialog 弹窗 v-modeltitlewidth
el-select 选择器 v-modeloptionsmultiple
el-pagination 分页 totalpage-sizecurrent-page
el-message 消息提示 messagetypeduration

总结

Element Plus 为 Vue3 提供了丰富的企业级 UI 组件:

  • 安装和引入 Element Plus 的两种方式
  • 常用组件(按钮、表单、表格、对话框)的基本用法
  • 主题定制和国际化配置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/927666.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

镇江百度网站排名中交路桥建设有限公司官网

Linux磁盘管理&#xff08;二&#xff09;&#xff1a;LVM的创建、格式化和使用 一、LVM原理回顾 LVM的工作原理进行一个总结&#xff1a; (1)物理磁盘被格式化为PV&#xff0c;空间被划分为一个个的PE (2)不同的PV加入到同一个VG中&#xff0c;不同PV的PE全部进入到了VG的PE…

全网网站建设维护wordpress热门文章 图片

BLEU (Bilingual Evaluation Understudy&#xff0c;双语评估基准&#xff09;是一组度量机器翻译和自然语言生成模型性能的评估指标。BLEU指标是由IBM公司提出的一种模型评估方法,以便在机器翻译领域中开发更好的翻译模型。BLEU指标根据生成的句子与人工参考句子之间的词、短语…

AI训练的悖论:为什么越追求准确率越会产生幻觉?

在早期时,我曾让大模型撰写一位冷门历史人物的传记。它胸有成竹,娓娓道来:年代、成就,甚至几句“名言”,一应俱全。读起来简直像历史上真的存在一样。 唯一的问题是:大部分内容都不是真的。严格来说,模型并非“…

完整教程:lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南

完整教程:lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family:…

此网站不支持下载视频怎么办wordpress的文要登录才能看

故障现象  一辆2010款起亚赛拉图车&#xff0c;搭载G4ED 发动机&#xff0c;累计行驶里程约为17.2万km。车主反映&#xff0c;车辆行驶正常&#xff0c;但组合仪表上的发动机转速表指针始终不动。 故障诊断  接车后进行路试&#xff0c;车速表、燃油存量表及发动机冷却温度…

信奥大联赛周赛(提高组)#2516-S 赛后盘点

国庆打的一把奶茶杯,大佬们全都复活了,故窝不占优势 qwq 战果 黄绿蓝紫,250 pts,但是 rk8,被虐爆了。 D1605 E-小梦的密码锁 贪心题,枚举 0~9,求将所有位调成同一个数字需要的操作数,可以通过操作 2 实现单位下…

US$78.85 CG ZA11 BEN.Z(3BTN) 3 Buttons Smart Remote Used with CGDI K2 Remote Key Programmer 5pcs/lot

CG ZA11 BEN.Z(3BTN) 3 Buttons Smart Remote Used with CGDI K2 Remote Key Programmer Package includes:5pc x CG ZA11 BEN.Z(3BTN) 3 Buttons Smart Remote Pictures of CG ZA11 BEN.Z(3BTN) 3 Buttons Smart Remo…

Atcoder Beginner Contest 426 A-D 题解

ACODE #include<bits/stdc++.h> #define usetime() (double)clock () / CLOCKS_PER_SEC * 1000.0 using namespace std; typedef long long LL; void read(int& x){char c;bool f=0;while((c=getchar())<…

网络推广最好的网站有哪些wordpress只显示一个主题

文章目录 SpringSecurity简介快速入门1.准备工作1.2引入SpringSecurity 认证1.登录校验流程2.原理2.1SpringSecurity完整流程2.2认证流程详解 3.解决问题3.1思路分析3.2准备工作3.3.实现3.3.1数据库校验用户3.3.2密码加密存储3.3.3登录接口3.3.4认证过滤器3.3.5退出登录 授权1.…

网站建设维护教程网站开发承诺函

转载于:https://www.cnblogs.com/mountian-lion/p/6353819.html

金融网站建设成功案例做网站具体流程

一、cluster ip Cluster IP 是 Kubernetes 中 Service 的 IP 地址&#xff0c;它是一个虚拟 IP 地址&#xff0c;用于集群内的 Pod 相互通信。 例如&#xff1a; Cluster IP&#xff1a;2.2.2.2负载的真实Pod IP&#xff1a;1.1.1.1 场景&#xff1a; Pod A 的 IP 地址是 …

PSRAM 是什么

SRAM 的英文是 Pseudo Static Random-Access Memory。 可以拆解为:Pseudo - 前缀,意为“伪”、“假的”Static - 静态的Random-Access Memory - 随机存取存储器所以,它的全称直译就是“伪静态随机存取存储器”。 在…

怎么自己改自己做的网站的图片wordpress js 钩子

近几年来&#xff0c;新能源汽车发展越来越快&#xff0c;而限制新能源电动汽车发展的主要因素是续航里程和充电问题。续航里程要靠提高电池性能来解决&#xff0c;而解决充电问题就要靠充电桩的普及来实现。下面小编带着大家一起来了解一下直流充电桩和交流充电桩给电动汽车充…

蓝色大气网站源码短视频素材库大全

流量控制的功能就是让发送方的发送速率不要太快&#xff0c;以便让接收方来的及接受&#xff0c;因此可以说流量控制是一个速度匹配服务&#xff0c;匹配发送方的发送速率和接收方的读取速率。 TCP利用滑动窗口机制来实现流量控制&#xff0c;滑动窗口的基本原理是&#xff0c…

Debian 13 eza 安装与常用参数

以下参数按「使用频率」与「实用场景」分组,可直接当作速查表。所有示例均亲测可 copy-paste。一、10 条「每天必用」参数目的 命令示例 说明1. 彩色+图标基础列目录 eza --icons=auto 需 Nerd Font;无则自动 fallba…

Syncthing 2.0 版本开机自启

2.0 版本不再支持单-,需要双-- 🛠️ 命令行选项优化 ​现代化了命令行选项解析方式。​​ 旧的短横线长选项(如 -home)​不再支持,必须使用 ​双横线,如 --home。 所以注意要 --no-console --no-browser方法在 …

鲜花 10.4:【半 whk 向】临项交换法贪心

题源:青岛 58 中高一作业。新定义能这么出? 直接考虑(3),这是一个经典问题 [NOIP 2012 提高组] 国王游戏 的模型,即临项交换法贪心。 题意即重排一个给定的二元组序列,使得 \(\max_{i=1}^n f_i\) 最小,其中, …

商务网站建设与维护 试题网站空间商盗取数据

随着微信小程序的日益普及&#xff0c;越来越多的人开始关注如何利用小程序来提供便捷的服务。对于心理咨询行业来说&#xff0c;搭建一个心理咨询预约小程序可以大大提高服务的效率和用户体验。本文以乔拓云平台为例&#xff0c;详细介绍如何轻松搭建一个心理咨询预约小程序。…

详细介绍:CompLLM 来了:长文本 QA 效率革命,线性复杂度 + 缓存复用,推理速度与效果双丰收

详细介绍:CompLLM 来了:长文本 Q&A 效率革命,线性复杂度 + 缓存复用,推理速度与效果双丰收2025-10-04 22:43 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wrap: normal !…

服务好的南昌网站设计好看欧美视频网站模板下载 迅雷下载地址

冒泡排序源代码&#xff0c;带有详细注释&#xff0c;希望可以帮助到大家&#xff0c;有用的话点个赞和收藏吧&#xff0c;感谢大家的阅读&#xff0c;Java小白一直在努力&#xff0c;承蒙大神们的厚爱。 定义 在程序设计语言中&#xff0c;排序算法主要有冒泡排序、快速排序、…