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

本文概述

20. Office UI Fabric Vue
19. Vuestrap
18. Semantic UI
17. VueBoot
16. Framevuerk
15. Vue-Material
14. N3-Components
13. Fish UI
12. VUI
11. Vuikit
10. Muse UI
9. iView
8. Vuetify
7. UIV(Bootstrap 3)
6. Bootstrap Vue
5. AT UI
4. Onsen UI Vue
3. Buefy
2. Keen UI
1. Element

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

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

文章图片
Vuestrap基本组件扩展了Bootstrap4。它由vuestrap, 纯Vue.js和Webpack构建。
18. Semantic UI Github

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

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

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

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

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

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

13. Fish UI Github

文章图片
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

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

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

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

文章图片
iView是Vue.js的高级UI工具包。它提供：

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

8. Vuetify Github

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

文章图片
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 2.4+的Bootstrap V4组件和网格系统的最全面的实现之一, 并带有大量且自动的WAI-ARIA可访问性标记。
5. AT UI Github

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

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

4. Onsen UI Vue Github

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

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

文章图片
Element是面向开发人员, 设计人员和产品经理的基于Vue 2.0的组件库。这个框架提供了对现代浏览器和Internet Explorer 10+的支持, 并且还提供了React和Angular版本。该框架的文档提供西班牙语, 英语和中文版本。使用Element, 你将能够使操作流程保持简单并清楚地表达你的意图, 以便用户可以快速理解并做出决策。
【20个最佳开源Vue.js UI框架】如果你知道Vue.js的另一个很棒的开源UI框架, 请不要害羞并在评论框中与社区分享。