一、简介

Element Plus 是一个基于 Vue.js 的开源 UI 组件库，旨在帮助开发者构建出现代化、美观且高效的 Web 应用程序界面。它是对 Element UI 的进一步发展，专注于提供更好的性能、更丰富的组件以及更好的开发体验。

二、ElemenPlus与ElementUI

Element Plus 是 Element UI 的进一步发展和升级版本，两者之间有关联但也存在一些区别，有着各种的优缺点。

1.关系

Element Plus 是 Element UI 的一个分支和进化版本。Element UI 是一个非常受欢迎的 Vue UI 组件库，旨在为开发者提供现代、美观的界面组件。Element Plus 则是在 Element UI 的基础上进一步发展而来，专注于提供更好的性能、更丰富的组件以及更好的开发体验，同时也兼容了 Vue 3 的新特性。因此，可以说 Element Plus 是 Element UI 的下一个版本，是 Element UI 的升级和扩展。

2.区别

性能： Element Plus 在性能方面进行了优化，采用了虚拟滚动、渲染优化等策略，以确保在处理大数据量时也能保持流畅。相比之下，Element UI 的性能可能在一些特定场景下稍显不足。
Vue 版本： Element UI 是基于 Vue 2 的，而 Element Plus 则是基于 Vue 3 开发的，充分利用了 Vue 3 的性能和新特性，如 Composition API。
组件： Element Plus 在组件方面引入了一些新的组件，如 Timeline 时间轴、TreeSelect 树选择器等，丰富了组件库。
按需加载： Element UI 支持按需加载，但 Element Plus 更加推崇按需加载，以减小项目的体积。
主题定制： Element Plus 在主题定制方面也进行了优化，使得定制主题更加容易。
适用场景： Element UI 适用于许多类型的项目，而 Element Plus 在大数据量、性能要求较高的项目中可能更为合适。
社区维护： Element UI 和 Element Plus 都拥有活跃的开发社区，但 Element Plus 的社区可能会更加关注最新的技术和需求。

3.优缺点

3.1 ElementPlus

优点：

更好的性能： Element Plus 在性能方面进行了优化，采用了虚拟滚动、渲染优化等策略，适用于处理大数据量的场景。
Vue 3 的支持： Element Plus 是基于 Vue 3 开发的，充分利用了 Vue 3 的性能优势和新特性，如 Composition API。
丰富的组件： Element Plus 提供了丰富的 UI 组件，涵盖了各种常见的界面元素，如表单、表格、菜单等。
定制主题： Element Plus 提供了较好的主题定制能力，可以根据项目需求定制主题，以满足品牌一致性。
模块化导入： Element Plus 支持按需导入组件，减小项目的体积，提高加载速度。
开发者友好： Element Plus 提供了详细的文档和示例，方便开发者学习和使用。

缺点：

学习曲线增加：对于初学者来说，由于引入了 Vue 3 的新特性和 Composition API，可能需要更长的时间来掌握。
生态系统适配问题： Element Plus 相对较新，一些第三方库和插件可能需要进行适配才能与其配合使用。

3.2 ElementUI

优点

成熟稳定： Element UI 是一个经过多年发展和广泛应用的成熟框架，拥有稳定的生态系统和文档。
易学易用： Element UI 的选项式 API 非常直观，适用于初学者，可以快速上手。
广泛的生态系统：由于广泛应用，有许多第三方库、组件和插件，加速开发。
生态工具支持： Element UI 配备了丰富的生态工具，如 Element Devtools，便于调试和开发。

缺点：

性能限制：在处理大数据量和复杂页面时，性能可能相对较低。
Vue 3 的支持较弱： Element UI 是基于 Vue 2 的，不直接支持 Vue 3 的新特性。
全局状态管理不便：在处理复杂的状态管理时，全局状态管理可能显得不够方便。

三、安装

Element Plus 可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。如果您确实需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill 。
由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。
浏览器版本要求：Edge ≥ 79；Firefox ≥ 78；Chrome ≥ 64；Safari ≥ 12

包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

unpkg

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

jsDelivr

<head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- Import component library -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
</head>

四、配置

1.完整引入

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

main.js

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

const app = createApp(App);

app.use(ElementPlus);
app.mount('#app');