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