Element Plus基于 Vue 3.0 的桌面端組件庫(kù)
官方續(xù)作——Vue 3.0 組件庫(kù)
Element Plus，由餓了么大前端團(tuán)隊(duì)開(kāi)源出品的一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3.0 的組件庫(kù)，提供了配套設(shè)計(jì)資源，幫助你的網(wǎng)站快速成型。
Element Plus 使用 TypeScript + Composition API 進(jìn)行了重構(gòu)，主要有：
- 使用 TypeScript 開(kāi)發(fā)，提供完整的類(lèi)型定義文件
- 使用 Vue 3.0 Composition API 降低耦合，簡(jiǎn)化邏輯
- 使用 Vue 3.0 Teleport 新特性重構(gòu)掛載類(lèi)組件
- 使用 Lerna 維護(hù)和管理項(xiàng)目
- 使用更輕量更通用的時(shí)間日期解決方案 Day.js
- 升級(jí)適配 popperjs, async-validator 等核心依賴(lài)
- 完善 52 種國(guó)際化語(yǔ)言支持
除此以外，還有：
- 全新的視覺(jué)*
- 優(yōu)化的組件 API
- 更多自定義選項(xiàng)
- 更加詳盡友好的文檔
特性：
一致性 Consistency
-
與現(xiàn)實(shí)生活一致：與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶(hù)習(xí)慣的語(yǔ)言和概念；
-
在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。
反饋 Feedback
-
控制反饋：通過(guò)界面樣式和交互動(dòng)效讓用戶(hù)可以清晰的感知自己的操作；
-
頁(yè)面反饋：操作后，通過(guò)頁(yè)面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。
效率 Efficiency
-
簡(jiǎn)化流程：設(shè)計(jì)簡(jiǎn)潔直觀的操作流程；
-
清晰明確：語(yǔ)言表達(dá)清晰且表意明確，讓用戶(hù)快速理解進(jìn)而作出決策；
-
幫助用戶(hù)識(shí)別：界面簡(jiǎn)單直白，讓用戶(hù)快速識(shí)別而非回憶，減少用戶(hù)記憶負(fù)擔(dān)。
可控 Controllability
-
用戶(hù)決策：根據(jù)場(chǎng)景可給予用戶(hù)操作建議或安全提示，但不能代替用戶(hù)進(jìn)行決策；
-
結(jié)果可控：用戶(hù)可以自由的進(jìn)行操作，包括撤銷(xiāo)、回退和終止當(dāng)前操作等。
運(yùn)行效果：
安裝：
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')