一、简介

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

二、ElementPlus与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

优点：

1. 更好的性能： Element Plus 在性能方面进行了优化，采用了虚拟滚动、渲染优化等策略，适用于处理大数据量的场景。

2. Vue 3 的支持： Element Plus 是基于 Vue 3 开发的，充分利用了 Vue 3 的性能优势和新特性，如 Composition API。

3. 丰富的组件： Element Plus 提供了丰富的 UI 组件，涵盖了各种常见的界面元素，如表单、表格、菜单等。

4. 定制主题： Element Plus 提供了较好的主题定制能力，可以根据项目需求定制主题，以满足品牌一致性。

5. 模块化导入： Element Plus 支持按需导入组件，减小项目的体积，提高加载速度。

6. 开发者友好： Element Plus 提供了详细的文档和示例，方便开发者学习和使用。

缺点：

1. 学习曲线增加： 对于初学者来说，由于引入了 Vue 3 的新特性和 Composition API，可能需要更长的时间来掌握。

2. 生态系统适配问题： Element Plus 相对较新，一些第三方库和插件可能需要进行适配才能与其配合使用。

3.2 ElementUI

优点

1. 成熟稳定： Element UI 是一个经过多年发展和广泛应用的成熟框架，拥有稳定的生态系统和文档。

2. 易学易用： Element UI 的选项式 API 非常直观，适用于初学者，可以快速上手。

3. 广泛的生态系统： 由于广泛应用，有许多第三方库、组件和插件，加速开发。

4. 生态工具支持： Element UI 配备了丰富的生态工具，如 Element Devtools，便于调试和开发。

缺点：

1. 性能限制： 在处理大数据量和复杂页面时，性能可能相对较低。

2. Vue 3 的支持较弱： Element UI 是基于 Vue 2 的，不直接支持 Vue 3 的新特性。

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

五、快速开始

ElementUI快速开始

Element Plus快速开始