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 |
按钮交互 | type 、size 、disabled 、loading |
el-form |
数据收集 | model 、rules 、label-width |
el-input |
文本输入 | v-model 、placeholder 、type |
el-table |
数据展示 | data 、border 、height |
el-dialog |
弹窗 | v-model 、title 、width |
el-select |
选择器 | v-model 、options 、multiple |
el-pagination |
分页 | total 、page-size 、current-page |
el-message |
消息提示 | message 、type 、duration |
总结
Element Plus 为 Vue3 提供了丰富的企业级 UI 组件:
- 安装和引入 Element Plus 的两种方式
- 常用组件(按钮、表单、表格、对话框)的基本用法
- 主题定制和国际化配置