当前位置: 首页 > news >正文

前端学习教程-ElementPlus 教程

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.hskmm.com/?act=detail&tid=24521

相关文章:

  • AI训练的悖论:为什么越追求准确率越会产生幻觉?
  • 信奥大联赛周赛(提高组)#2516-S 赛后盘点
  • PSRAM 是什么
  • Debian 13 eza 安装与常用参数
  • Syncthing 2.0 版本开机自启
  • 鲜花 10.4:【半 whk 向】临项交换法贪心
  • 前端学习教程-Pinia 教程
  • 布谷娱乐直播架构源码开发实用功能:技术驱动更迭的创新体验
  • Bean生命周期
  • 回忆QQ空间有感
  • mtgsig
  • 前端学习教程-Vue Router 教程
  • 详细介绍:Java-Spring 入门指南(十七)SpringMVC--Apipostl与RestFul实战测试
  • 详细介绍:告别 403 Forbidden!详解爬虫如何模拟浏览器头部(User-Agent)
  • 通过学习分位数函数提升预测准确性
  • 高中数列梳理
  • AtCoder Beginner Contest 426 实况记录 + A-D 题解
  • 提示词攻击如何防范(2025):从 Indirect Prompt Injection 到 RAG 供应链的分层防御实战
  • 【STM32项目开源】基于STM32的智能养殖场环境监测系统 - 详解
  • 前端学习教程-Axios
  • 『回忆录』返校前夜 230102
  • 断更
  • 前端学习教程-环境配置
  • TypeScript - Ref
  • 20251004 qmd 弱化规约(未完成)
  • 深入解析:人工智能专业术语详解(C)
  • 2025.10.4模拟赛
  • 黄金替罪羊
  • P5301 [GXOI/GZOI2019] 宝牌一大堆
  • 10.4 2025多校冲刺CSP模拟赛2 改题记录