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

引言

当我们还在为编写繁多的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包管理器安装一下:

js 复制代码
npm install element-plus --save

2. 引入使用:

  • 如果你对打包后的文件大小不是很在乎,那么可以直接使用完整导入,方便快捷。
js 复制代码
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')
  • 如果你在乎文件的大小,那么可以针对性引入,指哪打哪。
js 复制代码
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. 具体用法:

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

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

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

ElementPlus中一些比较实用的组件

各种各样的按钮

简洁优雅的动画效果:

常用的布局

各种Icon图标

注意:图标需另外引入

1. 还是拿出我们的npm:

js 复制代码
npm install @element-plus/icons-vue

2. 引入使用:

js 复制代码
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值。

3. 具体用法:

js 复制代码
<el-icon :size="size" :color="color">
    <Edit />
</el-icon>

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

结语

这样一看,你是不是对Element-plus有点心动呢?当然,大厂用的都是自己的组件库,但在处理外包项目或是构建规模较小的系统时,Element-plus能够成为得力干将。

相关推荐
码哥DFS10 分钟前
Flex布局原理
前端·css·css3
小样还想跑26 分钟前
axios无感刷新token
前端·javascript·vue.js
Java水解35 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户3802258598241 小时前
vue3源码解析:响应式机制
前端·vue.js
bo521001 小时前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
时间会给答案scidag1 小时前
报错 400 和405解决方案
vue.js·spring boot
普通程序员1 小时前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
白杨木影子被拉长1 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
山有木兮木有枝_1 小时前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子1 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序