个性化阅读
专注于IT技术分析

20个最佳开源Vue.js UI框架

点击下载

本文概述

要开始使用Vue, 你只需要JavaScript和HTML知识。有了这些基本技能, 你可以在遵循官方指南的几个小时内开始构建简单的应用程序。每个开始一个新项目的开发人员都知道设计自己的UI Element的过程会花费多少时间。作为每个框架, 都有其他可用的库(如UI Kit)来延长你的开发时间。 Vue.js也不例外, 因为你可以在项目中从头开始使用许多UI套件, 并在终端中运行几个命令以将其包含在项目中。

在此顶部, 我们收集了20个最不重要的开源UI套件, 你可以在新项目中开始使用它们, 以提供令人敬畏的用户体验, 并提高项目的开发时间。享用它们 !

20. Office UI Fabric Vue

Github

Office UI Vue.js

此框架是Vue.js的Office UI Fabric实现, 使用office-ui-fabric-js构建, JavaScript组件的JavaScript集合用于构建Office和Office 365的体验。

19. Vuestrap

Github

Vuestrap

Vuestrap基本组件扩展了Bootstrap4。它由vuestrap, 纯Vue.js和Webpack构建。

18. Semantic UI

Github

Semantic UI

Semantic UI Vue是 Semantic UI的Vue集成。它对 Semantic UI React的启发很大。如果你已经使用过它, 将会发现 Semantic UI Vue的API几乎相同。 Semantic UI Vue仍在大力开发中。请随意贡献。

17. VueBoot

Github

VueBoot

VueBoot是一个旨在简化在VueJS应用程序中使用Bootstrap的项目。 Bootstrap团队采用了许多艰苦的工作, 而复制该工作超出了该项目的范围。因此, 我们选择使用官方的Bootstrap javascript, 并将API封装在一个薄的VueJS包装器中。

16. Framevuerk

Github

Framevuerk

Framevuerk, 是一个基于Vue.js的响应式, 多语言, 方向支持和可配置UI框架, 名称真棒。

15. Vue-Material

Github

Vue-Material

Vue材质是有用的UI套件, 可使用Material Design和Vue.js设计和构建漂亮的应用程序。它经过精心设计, 因此你可以创建适合所有屏幕的应用程序, 并支持所有现代Web浏览器。

14. N3-Components

Github

N3-Components

N3组件库是使用Vue.js构建的, 它是一个功能强大的库, 供前端或全栈工程师快速构建网页。 N3组件致力于使用Vue.js构建一个巨大的开发人员生态圈。支持如下:

  • 超过60个组件。看这里
  • 个性。
  • UMD。
  • 使用ES6。

13. Fish UI

Github

Fish UI Vue.js

Fish UI是用于Web的Vue.js 2.0 UI工具包。该框架使用:

  • Vue.js, Moment, Vue-Router, ES6和Babel 6
  • 酷用Webpack 2.0和Vue Loader
  • 语义CSS组件
  • Less中的样式表

12. VUI

Github

VUI Vue.js UI框架

使用Vue构建的移动设备UI框架。 VUI提供的组件看起来像iOS, Android和Windows UI中的本机UI。但是, VUI不会像在Material design中那样构建那些动画。

11. Vuikit

Github

Vuikit Vue.js UI框架

虽然在构建Vue组件时可以单独使用UIkit, 但你可能会发现自己依赖于过多的依赖关系并构建包装器来填补缺少的逻辑空白。 Vuikit通过提供输出UIkit布局的本机, 不受干扰的组件来解决所有问题。

10. Muse UI

Github

Muse UI Vue.js UI框架

Muse UI基本上实现了Material Design指南中概述的每个组件, 以及Vue.js的许多其他功能组件。 Muse UI使用较少的文件, 所有颜色均由变量管理。自定义主题可以通过编写更少的文件来完成, 组件还提供参数以修改其效果。 Muse UI是基于Vue2.0开发的, Vue2.0是目前最快的前端框架之一, 紧凑, 友好的API, 可用于开发复杂的单页应用程序。

9. iView

Github

iView用户界面Vue.js

iView是Vue.js的高级UI工具包。它提供:

  • 数十个有用且美观的组件。
  • 友好的API。它是为具有任何技能水平的人而设计的。
  • 大量的文档和演示。
  • 很漂亮
  • 同时支持Vue.js 2和Vue.js 1。

8. Vuetify

Github

Vuetify UI框架

Vuetify是Vue.js的材料组件框架。 Vuetify可以与8个预制的vue-cli模板一起使用。从简单的html到功能完善的SSR, 你都可以在几分钟之内完成准备工作。准备好使用专门组成的舰队供你使用。总共有80多个, 可以满足任何应用的解决方案。

7. UIV(Bootstrap 3)

Github

UIV Vue.js UI框架

uiv是为Vue.js 2实现的Bootstrap 3组件库。该框架具有以下特点:

  • 轻巧的
    • 所有组件〜20KB压缩。
    • 仅依赖关系Vue&Bootstrap CSS。
    • 没有额外的CSS。
    • 支持单独导入。
  • 支持IE 9+和现代浏览器。
  • 支持SSR(服务器端渲染)。
  • 支持所有环境:
    • UMD build uiv.min.js可以在所有环境(包括浏览器)中使用
    • ES模块构建uiv.esm.js适用于现代打包程序, 例如webpack 2或汇总
    • CommonJS build uiv.common.js适用于旧的捆绑器, 例如browserify或webpack 1。

6. Bootstrap Vue

Github

Bootstrap Vue Vue.js

Bootstrap-Vue提供了适用于Vue.js 2.4+的Bootstrap V4组件和网格系统的最全面的实现之一, 并带有大量且自动的WAI-ARIA可访问性标记。

5. AT UI

Github

AT UI

AT UI是针对Vue.js的轻量级模块化前端UI库。该框架具有以下特点:

  • 基于Vue
  • NPM + Webpack + Babel前端开发工作流程
  • 支持ES2015
  • 独立于CSS样式, 使用户界面一致(请参阅:AT-UI样式)
  • 友好的API

4. Onsen UI Vue

Github

Onsen UI Vue.js

用于Onsen UI的Vue绑定(VueOnsen)提供了Vue 2组件和指令, 这些指令和指令包装了核心Web组件并公开了类似于Vue的API以便与它们进行交互。

3. Buefy

Github

Buefy UI框架

Buefy是基于Bulma框架和设计的Vue.js响应式UI组件的轻量级库。该框架具有以下特点:

  • 轻松保留当前的布尔玛主题/变量
  • 支持Material Design图标和FontAwesome
  • 非常轻巧, 除了Vue和Bulma之外, 没有内部依赖性
  • 大约60KB min + gzip(包括布尔玛)
  • 语义代码输出
  • 遵循布尔玛设计和一些Material Design UX
  • 专注于可用性和性能, 而不会过度动画

它支持Firefox, Chrome, Edge, Opera和Safari的最新版本。仅部分支持IE10 +。

2. Keen UI

Github

Keen UI Vue.js框架

Keen UI是带有一个简单API的轻量级Vue.js UI库。该设计的灵感来自Google的Material Design。但是, Keen UI并不能完全实现Material Design规范。 Keen UI不是CSS框架。因此, 它不包括网格系统, 字体样式等。相反, 重点在于需要Javascript的交互式组件。

1. Element

Github

Vue.js Element UI框架

Element是面向开发人员, 设计人员和产品经理的基于Vue 2.0的组件库。这个框架提供了对现代浏览器和Internet Explorer 10+的支持, 并且还提供了React和Angular版本。该框架的文档提供西班牙语, 英语和中文版本。使用Element, 你将能够使操作流程保持简单并清楚地表达你的意图, 以便用户可以快速理解并做出决策。

如果你知道Vue.js的另一个很棒的开源UI框架, 请不要害羞并在评论框中与社区分享。

赞(0)
未经允许不得转载:srcmini » 20个最佳开源Vue.js UI框架

评论 抢沙发

评论前必须登录!