PintereStory

Element UI与Element Plus：Vue框架下的UI组件库对比

新兰 2024.02.04 12:53

Element UI和Element Plus都是基于Vue的桌面端组件库，提供了丰富的UI组件，帮助开发者快速构建美观、功能强大的Web应用程序。它们各自具有独特的特点和优势，选择适合的组件库对于项目成功至关重要。本文将对比两者在功能、性能、兼容性等方面的区别，帮助你选择适合你的项目需求的组件库。

一、定义和框架区别

Element UI：一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库，基本不支持手机版。
Element Plus：基于Vue 3，面向设计师和开发者的组件库，组件布局考虑了手机版展示。
由此可见，Element Plus和Element UI的区别在于所使用的Vue版本不同。Vue 3相对于Vue 2进行了一些重大变更，因此在上手难度和使用方式上会有所不同。

二、性能和易用性

Element Plus是Element UI的升级版，在性能、可维护性、易用性等方面都有所提升。Element Plus还针对Vue 3的优化进行了一些性能上的改进，例如使用teleport而不是slot来实现组件的弹出框、弹出层等，减少组件的层级，提高渲染性能。

三、组件设计

Element Plus的组件设计更加轻量化和简洁化，去掉了一些不常用的组件，例如Image、Upload、Radio等，而新增了更符合当前开发趋势的组件，例如Tree、Avatar、Chip等。整个库的样式风格也更加简洁、扁平化，与当前流行的设计趋势相符。相比之下，Element UI的组件库相对较为完整，但可能存在一些过时或使用频率较低的组件。

四、兼容性

由于Element UI基本不支持手机版，因此在移动端兼容性方面可能存在一些问题。而Element Plus则考虑了手机版展示，因此在移动端兼容性方面更加优秀。如果你的项目需要开发移动端应用程序，Element Plus可能是一个更好的选择。

五、总结

总的来说，Element Plus和Element UI在很多核心组件上的设计差不多，例如Button、Input、Table等，但在一些细节上有所不同。如果你正在使用Vue 2.0开发桌面端应用程序，并且对移动端支持要求不高，那么Element UI可能是一个更好的选择。而如果你正在使用Vue 3开发应用程序，并且需要更好的性能和移动端支持，那么Element Plus可能更适合你的需求。不过需要注意的是，由于两者在代码风格、语法习惯等方面可能有所不同，因此在使用过程中可能需要开发者根据自己的实际情况进行调整和适应。

VueJs

2024-06-18

来源： Element UI与Element Plus：Vue框架下的UI组件库对比

Vue2中mixins混入（最详细介绍）

mixins的作用就是将相同的逻辑和功能抽离出来，分成单个文件，组件只需引入mixins就可以实现相同功能。

VueJs

2024-08-29

来源： Vue2中mixins混入（最详细介绍）这是我参与11月更文挑战的第3天，活动详情查看：11月更文挑战 mixins基本 - 掘金

Vue 3.0 如何替代Vue2中 prototype 的用法

寻ing2020-12-14 10:15:03

在vue2.x中，我们想设置全局变量，可以在main文件中用prototype绑定vue实列，在vue3.0中，可以用app.config.globalProperties来代替prototype，具体用法如下

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

const app = createApp(App)
app.use(store)
app.use(router)
app.config.globalProperties.$axios = axios // 自定义添加
const vm = app.mount('#app')

这样就可以正常使用了

// App.js
...
<script>
export default {
  name: 'App',
  methods: {...},
  mounted() {
    console.log(this.$axios)
  }
}
</script>

点击查看相关文档

更多全局api的变更

VueJs

2025-04-22

来源： vue 3.0 prototype 替代用法_vite vue3 vue.prototype替代-CSDN博客