Vue (十五) --------- UI 组件库_vue ui组件库-CSDN博客

本文链接：https://blog.csdn.net/m0_51111980/article/details/125618184

一、移动端常用 UI 组件库

1. Vant

官网：https://youzan.github.io/vant

Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，于 2017 年开源，其提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。

2. Vux

官网：https://vux.li/

VUX 是基于 WeUI 和 Vue(2.x) 开发的移动端UI组件库，主要服务于微信页面。基于webpack + vue-loader + vux可以快速开发移动端页面，配合 vux-loader 方便在WeUI的基础上定制需要的样式。vux-loader 保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。

VUX 并不完全依赖于 WeUI，VUX 在 WeUI 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUI的设计规范。

3. Cube UI

官网：https://didi.github.io/cube-ui

cube-ui 是由滴滴开源的基于 Vue.js 实现的移动端组件库。

其有以下的功能特性

质量可靠，其由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。
体验极致，其以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。
标准规范，其遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。
扩展性强，其支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

4. Mint UI

官网：http://mint-ui.github.io

由饿了么前端团队推出的 Mint UI 是一个基于 vue.js 的移动端组件库。

Mint UI 有以下特性

Mint UI 包含丰富的 css 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

二、PC 端常用 UI 组件库

1. Element UI

官网：https://element.eleme.cn

Element 是由饿了么UED设计、饿了么前端开发的一套基于 Vue 2.0 的桌面端组件库。

与传统的开发对比传统的是一个应用一个页面对应对多个界面，vue+elementUI的话是单页面的开发方式，不管项目多少个页面，只需要使用一个页面即可实现传统方式的功能，从性能方面来讲它的渲染、页面切换、都是比传统的快很多的。

Element UI 的特性：

一致性 Consistency
现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈 Feedback
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
效率 Efficiency
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
可控 Controllability
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由地进行操作，包括撤销、回退和终止当前操作