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

联合创作 · 2023-09-28 01:12


官方续作——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')


浏览 35
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报