Element-ui

145 阅读2分钟

什么是 Element?

Element,一套为开发者、设计师和产品经理准备的基于 vue 2.0 的桌面端组件库它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库,提供了丰富的 PC 端组件,简化了常用组件的封装,大大降低了开发难度。

什么是 Vue?

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

Vue 的两个核心功能:

  • 声明式渲染:Vue 基于标准 HTML 拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  • 响应性:Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

Element-Ui 与 Vue 的关系

  1. Element-Ui 是基于 Vue 封装的组件库,简化了常用组件的封装,提高了重用性原则;
  2. Vue 是一个渐进式框架,Element-Ui 是组件库。

Element设计原则

一致性

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

反馈 反馈

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

效率 效率

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

可控

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