感受一下饿了么团队做的超强ui组件库Element-plus

一颗苹果OMG
2,538 阅读3分钟

引言

当我们还在为编写繁多的css感到苦恼时，市场上已经出现了各种各样的ui组件库。在前端开发领域，框架和组件库的选择对项目的效率和可维护性有着至关重要的影响。今天来聊一聊ElementPlus，作为Element UI的升级版，它是一个基于Vue 3的现代组件库，不仅继承了Element UI的优秀特性，还融入了更多新的设计理念和技术优化，使得开发者能够更轻松地构建出一个极具观赏性的应用。

ElementPlus简介

ElementPlus是由饿了么前端团队研发的，他们最初开发了Element UI，这是一个基于Vue 2的组件库，广泛应用于企业级前端开发中。随着Vue 3的推出，饿了么前端团队继续推进技术迭代，研发了ElementPlus，提供了各种更加现代化的组件。需要注意的是，尽管ElementPlus与Element UI有相似的名字和开发背景，它们是两个独立的项目，ElementPlus是基于Vue 3的新一代产品。

ElementPlus如何使用

1. 老规矩，先用咱的npm包管理器安装一下：

npm install element-plus --save

2. 引入使用：

  • 如果你对打包后的文件大小不是很在乎，那么可以直接使用完整导入，方便快捷。
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')
  • 如果你在乎文件的大小，那么可以针对性引入，指哪打哪。
import {
    ElButton,
    ElForm,
    ElFormItem,
    ElInput,
} from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
app
    .use(ElButton)
    .use(ElForm)
    .use(ElFormItem)
    .use(ElInput)
import { usePermissStore } from './store/permiss';
app.mount('#app')

3. 具体用法：

image.png

这就完成了一个简单的登录组件：

image.png

是不是觉得没什么变化，不就加了个圆角，但当我们点击账号输入框并且将鼠标移到登录按钮上时：

image.png

是不是简洁又舒服，如果感觉差点什么还可以自己继续加样式。

ElementPlus中一些比较实用的组件

各种各样的按钮

image.png

简洁优雅的动画效果：

image.png

常用的布局

image.png

各种Icon图标

注意：图标需另外引入

1. 还是拿出我们的npm：

npm install @element-plus/icons-vue

2. 引入使用：

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

这里 for of + entries 用的太精妙了，刚好对应component的key、value值。

entries:遍历数组中的所有元素，并且返回每一对 [index, value]。

3. 具体用法：

<el-icon :size="size" :color="color">
    <Edit />
</el-icon>

这是一个退出的图标，你还可以自定义它的颜色与大小。

结语

这样一看，你是不是对Element-plus有点心动呢？当然，大厂用的都是自己的组件库，但在处理外包项目或是构建规模较小的系统时，Element-plus能够成为得力干将。如今，它现在已经由社区驱动，通过世界各地的开发者共同维护和改进。

avatar
文章
阅读
粉丝