Element Plus基于 Vue 3.0 的桌面端组件库-技术圈

Element Plus基于 Vue 3.0 的桌面端组件库

联合创作 · 2023-09-28

官方续作——Vue 3.0 组件库

Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。

Element Plus 使用 TypeScript + Composition API 进行了重构，主要有：

使用 TypeScript 开发，提供完整的类型定义文件
使用 Vue 3.0 Composition API 降低耦合，简化逻辑
使用 Vue 3.0 Teleport 新特性重构挂载类组件
使用 Lerna 维护和管理项目
使用更轻量更通用的时间日期解决方案 Day.js
升级适配 popperjs, async-validator 等核心依赖
完善 52 种国际化语言支持

除此以外，还有：

全新的视觉*
优化的组件 API
更多自定义选项
更加详尽友好的文档

特性：

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

运行效果：

安装：

npm install element-plus

示例代码：

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

const app = createApp(App) 
app.use(ElementPlus) 
app.mount('#app')

编辑