当前位置：首页 > 前端教程

elementui plus

2026-03-06 02:31:13前端教程

Element Plus 简介

Element Plus 是基于 Vue 3 的组件库，是 Element UI 的升级版本，专为现代前端开发设计。它提供了丰富的 UI 组件、主题定制能力和国际化支持，适用于快速构建企业级中后台系统。

核心特性

Vue 3 兼容性：完全适配 Vue 3 的 Composition API 和响应式系统。
TypeScript 支持：所有组件均提供完整的类型定义。
主题定制：通过 SCSS 变量或在线主题生成器轻松修改样式。
高性能：优化渲染逻辑，减少不必要的 DOM 操作。

安装与使用

通过 npm 或 yarn 安装：

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

全局引入（推荐在 main.js 或 main.ts 中配置）：

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')

按需引入（需配合 unplugin-vue-components 等插件）：

import { ElButton } from 'element-plus'
app.component(ElButton.name, ElButton)

常用组件示例

按钮组件

<template>
<el-button type="primary">主要按钮</el-button>
</template>

表单组件

<template>
<el-form :model="formData">
 <el-form-item label="用户名">
   <el-input v-model="formData.username" />
 </el-form-item>
</el-form>
</template>
<script setup>
const formData = reactive({ username: '' })
</script>

表格组件

<template>
<el-table :data="tableData">
 <el-table-column prop="date" label="日期" />
 <el-table-column prop="name" label="姓名" />
</el-table>
</template>
<script setup>
const tableData = [
{ date: '2023-01-01', name: '张三' }
]
</script>

主题定制

通过覆盖 SCSS 变量实现：

创建 styles/element-variables.scss 文件：

$--color-primary: #ff4500;
@use "element-plus/theme-chalk/src/index" as *;

在 vite.config.js 中配置：

export default defineConfig({
css: {
 preprocessorOptions: {
   scss: {
     additionalData: `@use "@/styles/element-variables.scss" as *;`
   }
 }
}
})

国际化支持

切换语言示例：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, { locale: zhCn })