• Vue (十五) --------- UI 组件库



    Vue.js 是一个渐进式 javascript 框架,用于构建 UIS (用户界面) 和 SPA (单页应用程序)。UI 组件库提高了我们的开发效率,增强了应用的整体外观、感觉、交互性和可访问性,下面就来看看有哪些适用于 Vue 的 UI 组件库。

    一、移动端常用 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
      用户决策: 根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
      结果可控: 用户可以自由地进行操作,包括撤销、回退和终止当前操作

    2. IView UI

    官网:https://www.iviewui.com

    iView UI一套基于 vue.js 的高质量 UI 组件库,搭配使用 iView UI 组件库形成的一套后台集成解决方案,由 TalkingData 前端可视化团队部分成员开发维护。iView Admin 遵守 iView 设计和开发约定,风格统一。

    iView UI特性:

    • 高质量、功能丰富;

    • 友好的 api ,自由灵活地使用空间;

    • 细致、漂亮的 UI;

    • 事无巨细的文档;

    • 可自定义主题。

    3. Vue-Material

    官网:https://github.com/vuematerial/vue-material

    Vue Material 是一个建立在谷歌的 Material Design 基础上的轻量级框架,是一个实现Google像素材料设计的Vue组件库,它提供了适合所有现代Web浏览器的内置动态主题的组件,它的API也简单明了。

    Vue Material 是一个轻量级的框架, 建立在谷歌的 Material Design 基础上。设计强大的和美观的web应用并适用于不同的屏幕。

  • 相关阅读:
    MongoDB安装教程
    微信小程序毕业设计健康食谱菜谱系统微信小程序+后台管理系统|前后分离VUE.js
    毫米波雷达点云 DBSCAN聚类算法
    【shell】条件语句
    【动手学深度学习】CNN浅记
    KVM虚拟化技术核心功能详解
    渗透流程
    Docker与低代码跨平台开发:实现高效跨平台开发的新范式
    晶振不仅仅是可以振荡就够了
    图片标签的路径和属性标签
  • 原文地址:https://blog.csdn.net/m0_51111980/article/details/125618184