文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

12 个不容错过的 Vue UI 组件库,请查收!

2024-12-02 08:17

关注

1. Element UI

Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它是一个用于 Web 的 UI 组件库 ,除了 Vue 之外,它还具有React 和 Angular的版本。

Element UI 的特性:

(1)一致性 Consistency

与现实生活一致: 与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;

在界面中一致: 所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

(2)反馈 Feedback

控制反馈: 通过界面样式和交互动效让用户可以清晰的感知自己的操作;

页面反馈: 操作后,通过页面元素的变化清晰地展现当前状态。

(3)效率 Efficiency

简化流程: 设计简洁直观的操作流程;

清晰明确: 语言表达清晰且表意明确,让用户快速理解进而作出决策;

帮助用户识别: 界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。

(4)可控 Controllability

用户决策: 根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;

结果可控: 用户可以自由地进行操作,包括撤销、回退和终止当前操作等。

GitHub(star:51.6k):https://github.com/ElemeFE/element

2. Ant Design of Vue

Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库,用于开发和服务于企业级中后台产品。

Ant Design of Vue 的特性:

GitHub(star:16k):https://github.com/vueComponent/ant-design-vue/

3. Vue Material

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

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

GitHub(star:9.6k):https://github.com/vuematerial/vue-material

4. BootStrap Vue

采用 BootstrapVue 构建响应式、移动优先、ARIA项目(Accessible Rich Internet Application,可访问的富媒体应用,即无障碍友好应用),基于 Vue.js 和世界全球最受欢迎的 CSS 前端框架 — Bootstrap v4。

BootstrapVue 拥有40多个可用插件和80多个自定义UI组件、指令以及300多个图标,全面兼容并符合 Bootstrap v4.4组件和网格系统规范,基于 Vue.js v2.6, 并具备广泛和自动的 WAI-ARIA 可访问性友好支持。

GitHub(star:13.7k):https://github.com/bootstrap-vue/bootstrap-vue

5. Vuetify

Vuetify 是一个基于 Vue.js 精心打造 UI 组件库,整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。

Material Design 是 Google 推出的设计语言,颜色鲜艳、动画效果突出,旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

Vuetify 的特性:

GitHub(star:33.4k):https://github.com/vuetifyjs/vuetify

6. Vux

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

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

不过,官网首页也列出了这个组件库的缺点:体验不极致、维护靠个人,谨慎选择。

GitHub(star:18k):https://github.com/airyland/vux

7. View UI

View UI,即原先的 iView,是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

View UI 的特性:

GitHub(star:2.5k):https://github.com/view-design/ViewUI

8. Mint UI

Mint-UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。它可以实现真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。

考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。

依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 100kb+。

GitHub(star:16.4k):https://github.com/ElemeFE/mint-ui

9. Muse-UI

Muse-UI 是一个基于 Vue 2.0 优雅的 Material Design UI 开源组件库,主要用于移动端和一些对浏览器兼容性要求不高的桌面端应用。

Museui 的特性

GitHub(star:8.3k):https://github.com/museui/muse-ui

10. Buefy

Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件,它提供了即装即用的轻量级组件。

Buefy 的特性:

GitHub(star:9k):https://github.com/buefy/buefy

11. Quasar

Quasar 包括用 Vue 构建的几十个 Vue.js 组件组成,为响应式 Web 应用程序和混合移动应用程序提供的丰富功能选项。组件是作为 Web 组件编写的,所以它们嵌入了 HTML,CSS 和 Javascript 代码,只需在页面和布局模板中标注一个 HTML 标记即可使用。

Quasar 的特性:

GitHub(star:20.4k):https://github.com/quasarframework/quasar

12. Vuesax

Vuesax是基于Vue.js的组件框架,从零开始设计,可以逐步采用。Vuesax致力于促进应用程序的开发,在不删除必要功能的情况下改进其设计。“我们希望所有组件具有独立的颜色,形状和设计,以实现我们前端喜欢的自由设计,同时又不损失创作和生产的速度。”

GitHub(star:5.3k):https://github.com/lusaxweb/vuesax


来源:前端充电宝内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯