2018年最应该关注的11个vue.js组件库

简介: 根据最近的React库和Angular库的列表发展情况。2018年,这里统计有11个常用的vue.js组件库,它们最有可能出现在你的下一个vue.js应用程序的UI中。

根据最近的React库和Angular库的列表发展情况。2018年,这里统计有11个常用的vue.js组件库,它们最有可能出现在你的下一个vue.js应用程序的UI中。

Vue.js, React and Angular NPM 2017下半年下载情况

不同于ReactAngularVue.js是由Evan You通过人们进行项目资助来维持的一个开源的代码库。你也许会说,这正是为什么Vue.js很牛的一个重要原因,因为它鼓励你“写更高质量的代码和更好的文档内容,超出你通常的期望”。

将近 80k个Stars,并得到Adobe,gitlab等公司的欢迎和使用,Vue受欢迎的程度同样超出预期,似乎仍然在持续增长。

Vue, React and Angular GitHub的统计 2017年12月13日

Vue的成功很大一部分原因在于它的组件。与组件一起工作意味着您可以孤立地考虑每个UI片断,鼓励重用性和模块化,并帮助保持UI一致性。所有Vue组件也就是Vue的实例,然后接受同样的选择对象(除了几个特定的选项外),提供相同的生命周期。

Vue.js组件构建应用程序

组件也可以被共享,如果使用Bit连接工具会像Git那样。而Yarnnpm之间能形成平滑的互动,并可以通过代码库来进行分享。你能找到任何Git存储库中的组件,快速分享他们的变化和组件集合。从那里,组件如需要提取并使用,那可以使用打包工具Yarn/npm然后进一步修改任何库的源代码。

1. Vuetify

7K以上的Starsvuetifyjs根据MDL规范提供UI布局。V1.0 Alpha release 版本提供了超过80个可重复使用组件,这些组件都是基于语义的很容易记住,名字属性也设计的简单明了。

2. Vue Material

一个Vue组件库,实现类似谷歌的MDL。有5KStars,它提供了适用于所有现代浏览器的内置动态主题和一个明确的目标即尽可能简单的组件API。

3. Keen UI

虽然受UI规范的启发,但Keen-UI并不是真正的MDL标准UI库。有3Kstars,它不是一个CSS框架,不包括表格或排版样式,但使用组件需要JavaScript。

4. Element

有超过21KStars!这个广受欢迎的Vue 2工具包为网站提供了丰富的选择——可定制的组件。虽然该文件可能对中国或者采用中文页面的来说更简单用户,这个库就是一个活的生态系统,提供了一个Vue UI库的强大选择。

5. Buefy

buefy提供Vue.js和Bulma组件。在接近2Kstars中,它提供了即插即用的响应方式。虽然组件选择有一定的局限性,但会使您想尝试一下。

6. Bootstrap-Vue

它有3kStars,Bootstrap-Vue可以使用Vue.js和Bootstrap 4生成移动优先的响应式界面。可支持vue.js 2.4 +,它带有一个自动WAI-ARIA可达性标记。

7. AT-UI

建立专用的桌面应用程序用户界面,提供npm + webpack + babel支持的前端开发的工作流。这个组件更适合使用英语的界面,它提供了一个适合选择的干净和整齐的UI组件。

8. Fish-UI

Fish-UI是一个基于ES2015和webpack工作的Web工具包。几乎没有任何文档,这个库有多大35个组件的丰富选择,其中有一个比较干净的基本接口和良好的结构。

9. Quasar

4K以上的Stars,这是个流行的框架。包括几十个vue.js组件,对Web应用程序和移动应用程序的功能提供丰富的选择。组件是作为Web组件编写的,因此它们可以嵌入HTML、CSS和JavaScript代码,您只需在页面和布局模板中包含HTML标记即可使用它们。

10. Muse UI

5KStars,Muse UI是vue.js 2的Material Design UI库。虽然你可能要说只对中文是很友好的,但这些紧密的组件对于那些寻求一个vue.js Material Design UI库的人来说,还是很不错的。

11. Vux

10KStarsVux的灵感来自移动应用程序WeChat的weui这个广泛流行的组件库。使用它的话注意:文档是中文的,但也提供英文版本。每一个组件都通过文档进行了交互式的呈现,并带有现场的“移动”模拟演示。

组件

每一个组件都可以在Vue项目awesome-vuecomponents and libraries下发现。为让你的用户界面的一致性,避免重复,避免增加多个库到你的项目,你也可以通过bit来添加使用任何库,也可以快速使用npm/Yarn安装使用单个组件。

无论你选择那个库或设计自己的组件,在2018,vue.js都是你的下一个应用程序的一个强有力的架构竞争者,因为它提供一个易于提取,轻巧而灵活的框架。

汇智网(www.hubwiz.com)小智整理翻译。

分享最新的Vue.js 2 全家桶系列教程:

1.vue.js 入门与提高: http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99

2.vuex 2 入门与提高: http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a

3.vue-router 入门与提高: http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50

4.vue.js 工程化实践: http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9


相关文章
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
342 2
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
827 0
|
8月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
1067 4
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
6月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件的实现代码:支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
本文详细介绍了在 Vue 项目中实现一个功能完善、交互友好的表情包输入组件的方法,并提供了具体的应用实例。组件设计包含表情分类展示、响应式布局、与输入框的交互及样式定制等功能。通过核心技术实现,如将表情插入输入框光标位置和点击外部关闭选择器,确保用户体验流畅。同时探讨了性能优化策略,如懒加载和虚拟滚动,以及扩展性方案,如自定义主题和国际化支持。最终,展示了如何在聊天界面中集成该组件,为用户提供丰富的表情输入体验。
538 8
|
6月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
306 1
|
8月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
678 6
|
6月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
294 0
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
589 161
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
867 159