什么是 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 的关系
- Element-Ui 是基于 Vue 封装的组件库,简化了常用组件的封装,提高了重用性原则;
- Vue 是一个渐进式框架,Element-Ui 是组件库。
Element设计原则
一致性
- 与现实生活一致: 与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
- 在界面中一致: 所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
反馈 反馈
- 控制反馈: 通过界面样式和交互动效让用户可以清晰的感知自己的操作;
- 页面反馈: 操作后,通过页面元素的变化清晰地展现当前状态。
效率 效率
- 简化流程: 设计简洁直观的操作流程;
- 清晰明确: 语言表达清晰且表意明确,让用户快速理解进而作出决策;
- 帮助用户识别: 界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
可控
- 用户决策: 根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
- 结果可控: 用户可以自由的进行操作,包括撤销、回退和终止当前操作等。