ElementPlus是基于Vue3的企业级UI组件库，专为中后台系统设计。

从  vue-element-admin（Vue2 + Element UI）升级到 Element Plus（Vue3），最核心的变化在于 安装方式和 API 调用方式。好消息是，组件的使用习惯和命名几乎完全一致，上手成本很低。

相比Vue2的ElementUI，它采用CompositionAPI和TypeScript重构，提供60+组件并优化了TS支持。

安装只需npm install element-plus，通过main.ts全局引入即可使用。

组件命名和API与旧版高度一致，但图标库独立为@element-plus/icons-vue，表单验证改用Promise。

推荐使用unplugin-vue-components实现按需引入，减少打包体积。

ElementPlus保留了ElementUI的设计风格，同时完全适配Vue3特性，ElementPlus文档详细且社区活跃，是Vue3项目的高效开发选择。

Element Plus

Element Plus 是一套为开发者、设计师和产品经理准备的基于 Vue 3 的桌面端组件库。

简单来说，如果你正在使用 Vue 3 开发企业级的后台管理系统（如 CRM、ERP 或各种中后台界面），Element Plus 就是一套现成的“积木”，能让你快速搭建出美观且功能完善的页面，而不需要从零开始写 CSS 和交互逻辑。

🚀 核心亮点

  1. Vue 3 原生支持 🌟
    它不是旧版的简单移植，而是基于 Vue 3 的 Composition API 和 TypeScript 从头重写的。
  2. 企业级定位 🏢
    它的设计初衷就是为了服务企业级中后台产品。组件风格简洁、统一，涵盖了从基础的按钮、表单，到复杂的表格、树形控件、数据大屏等几乎所有后台场景的需求。
  3. 现代化特性 🎨
    • 暗色主题： 内置了对暗黑模式的支持，满足不同用户的视觉偏好。
    • 国际化： 支持多语言切换，适配全球用户。
    • 无障碍访问： 组件在设计时考虑了可访问性，对屏幕阅读器等辅助技术有更好的支持。

📊 Element Plus vs 旧版 Element UI

很多开发者容易混淆 Element Plus 和 Element UI，它们其实是“父子”关系。

特性 Element UI (旧版) Element Plus (新版)
适用框架 Vue 2.x Vue 3.x
TypeScript 支持有限 原生支持，类型定义完善
核心架构 Options API 为主 Composition API
组件数量 约 50+ 60+ (功能更丰富)

🛠️ 如何开始使用？

如果你想在项目中引入 Element Plus，通常非常简单。

关联阅读推荐
实用篇：vsCode 中连接 WSL 并快速开始一个 Vue3 新项目

在 VSCode 中使用终端克隆 Element Plus 全流程

假设你已经创建了一个 Vue 3 项目（推荐使用 Vite 脚手架），可以通过以下步骤安装：

安装依赖

你可以使用你喜欢的包管理器（npm, yarn, pnpm）进行安装：

# 使用 npm
npm install element-plus --save<websource>source_group_web_10</websource>

# 使用 yarn
yarn add element-plus

# 使用 pnpm
pnpm install element-plus
```<websource>source_group_web_11</websource>

引入方式

  • 完整引入：最简单的方式，在 `main.js` 中一次性引入所有组件和样式（适合快速原型开发，但打包体积较大）。

  • 按需引入（推荐）：只引入你用到的组件，可以有效减少最终打包的 JS 体积。配合插件（如 `unplugin-vue-components` 和 `unplugin-auto-import`），你甚至不需要手动去 `import` 组件，写模板时直接用，插件会自动帮你引入。
全局引入（最快速）

如果你只是想先试试水，这是最快捷的方式。

在你的 main.js 中直接引入整个库和样式

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 如果需要图标，还需要额外引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'

const app = createApp(App)

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(ElementPlus)
app.mount('#app')
按需自动导入（推荐生产项目）

vue-element-admin 默认使用了按需加载。

在 Element Plus 中，推荐使用插件实现自动按需引入，无需手动写 import 语句-1-6。

首先安装插件：

npm install -D unplugin-vue-components unplugin-auto-import

然后在 vite.config.js 中配置：

import { defineConfig } from 'vite'
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: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

配置完成后，你就可以直接在模板中使用 <el-button>，插件会自动帮你导入对应的组件和样式-8。

总结

如果你正在启动一个新的 Vue 3 项目，Element Plus 是一个非常稳妥且高效的选择。它的文档非常完善，社区活跃度极高，遇到问题很容易找到解决方案。

你可以先访问它的[官方中文文档](https://element-plus.org/zh-CN/)，那里有详细的组件示例和教程，能帮你快速上手。

在 `main.ts` 中一次性引入所有组件和样式

要在 main.ts 中完整引入（全局引入）Element Plus，你需要做两件事：引入组件库本身 和 引入对应的 CSS 样式文件。

这是最简单、最直接的引入方式，适合快速搭建原型或对打包体积不敏感的项目。

✅ 步骤一：安装依赖

确保你已经安装了 element-plus 包。如果没有，请在终端运行：

pnpm install element-plus

或使用 npm/yarn

✅ 步骤二：修改 main.ts 文件

打开你的 main.ts（通常在 src/main.ts），按照以下代码进行配置：

import { createApp } from 'vue'
import App from './App.vue'

// 1. 引入 Element Plus 组件库
import ElementPlus from 'element-plus'

// 2. 引入 Element Plus 的样式文件 (非常重要！)
import 'element-plus/dist/index.css'

// 3. 创建应用实例
const app = createApp(App)

// 4. 使用 Element Plus (将其注册为全局插件)
app.use(ElementPlus)

// 5. 挂载应用
app.mount('#app')

💡 关键点说明

  1. import 'element-plus/dist/index.css'：
    • 这一行必不可少。如果你只引入了组件库但没引入 CSS，页面上只会显示原始的 HTML 标签（没有颜色、圆角、阴影等样式） [[3.
  2. app.use(ElementPlus)：
    • 这行代码会将所有的 Element Plus 组件（如 ElButton, ElTable 等）注册为全局组件。这意味着你在任何 .vue 文件的模板中都可以直接使用 <el-button>，而不需要在单个组件内再次 import [[2, 5.

🌍 补充：设置中文（可选）

Element Plus 默认是英文。如果你希望全局默认使用中文（例如日期选择器显示“年/月/日”而不是“Jan/Feb”），可以稍微修改一下代码：

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/es/locale/lang/zh-cn'

const app = createApp(App)

// 在 use 时传入 locale 选项
app.use(ElementPlus, {
  locale: zhCn,
})

app.mount('#app')

完成以上步骤后，你就可以在项目中任意位置直接使用 Element Plus 的组件了，例如在 App.vue 中：

<template> <el-button type="primary">你好，Element Plus！</el-button> </template>

页面效果

在一个空白 Vue3 项目中使用 Element Plus

核心差异与注意事项

由于你熟悉 vue-element-admin（基于 Vue2），下面列出几个最需要留意的变化：

  1. Vue 版本：Element Plus 基于 Vue 3，不再支持 Vue 2。你需要学习 Vue 3 的 Composition API（setup 语法糖），但 Element Plus 依然完美支持 Options API（即 Vue2 的 data/methods 写法），所以你可以先按照原来的写法写代码，再慢慢过渡-5-8。

  2. 图标库独立：在 Element UI 中图标是内置的。在 Element Plus 中，图标被拆分为独立的包 @element-plus/icons-vue。你需要单独安装并注册-1-5。

    <!-- 需要使用 :icon 属性绑定 -->
<el-button :icon="Search" type="primary">搜索</el-button>

<script setup>
import { Search } from '@element-plus/icons-vue'
</script>

  3. 尺寸单位：vue-element-admin 中默认尺寸多为 medium。Element Plus 默认尺寸较小，如果需要还原旧版风格，可以在 App.vue 或 main.js 中配置全局尺寸：

    app.use(ElementPlus, { size: 'default' }) // 可选 large / default / small

  4. 表单验证：el-form 的 validate 方法返回的不再是回调，而是 Promise，用法更现代化-5

    // 旧版 (Element UI)
this.$refs.form.validate((valid) => { if(valid) {...} })

// 新版 (Element Plus)
try {
  const valid = await this.$refs.form.validate()
  if(valid) {...}
} catch (error) { ... }

选择合适的后台模板（平滑过渡）

如果你想省去配置的时间，直接找一个类似 vue-element-admin 的 Vue 3 版本，这两个项目最值得关注：

模板方案 技术栈 特点与适用场景 推荐指数
vue3-element-admin Vue3 + Vite + Element Plus 完美平替。基于 vue-element-admin 升级，保留了原项目的架构风格，且没有对 Element Plus 组件进行过度封装，上手成本极低-3-6-9。 ⭐⭐⭐⭐⭐
Vue Element Plus Admin Vue3 + Element Plus + TS 官方推荐。功能完整，示例丰富，适合需要官方最佳实践参考的项目-3-9。 ⭐⭐⭐⭐

选择 vue3-element-admin 会让你的迁移过程非常平滑，目录结构、路由配置方式都会让你感觉非常熟悉-6。

组件使用示例

下面是一个简单的表单示例，你可以对比一下和旧版的写法差异：

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="用户名">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="状态">
      <el-switch v-model="form.status" />
    </el-form-item>
    <el-form-item>
      <!-- 事件绑定依然使用 @click -->
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive } from 'vue'
// 即使按需引入，也不需要手动 import ElButton，插件会自动处理

const form = reactive({
  name: '',
  status: true
})

const onSubmit = () => {
  console.log('提交的数据：', form)
}
</script>

总的来说，Element Plus 的组件名、属性和事件名都继承了 Element UI 的命名习惯，你可以直接复用之前的业务代码，只需注意 Vue 3 的根节点和图标引入方式的差异即可。

Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

鸽姆智库（GG3M）投资机构合作方案（完整版）| GG3M Investment Institution Cooperation Plan

avatar AtomGit开源社区
cover

工业AI全栈实战：从YOLO视觉缺陷检测到PLC闭环智能控制，我踩过的坑与完整落地方案

avatar AtomGit开源社区
cover

别再只拿AI做质检了！工业大模型实战：从“看缺陷”到“自主决策”的架构跃迁

avatar AtomGit开源社区