Vue 开源项目 TOP45

你的名字 2022-02-21 00:41 294阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

在过去一年里，前端开发发展迅速，前端工程师的薪资亦是水涨船高。2019 更是热度不减，而作为近年来尤为热门的前端框架，Vue.js 自是积累了大量关注。本文将为你介绍 2019 年最值得关注的 45 个 Vue.js 开源项目——Let's go!

![Image 1][]

在过去的一年里，我们比较了将近 12000 个 Vue.js 开源项目和库，并从中挑选了最好的 45 个（占比 0.37%）。  
这些项目和库可以分为 3 类：

*  用户界面（1~19）
 *  Vue.js工具（20~36）
 *  项目（37~45）

这是一个极具权威性的表单，精确汇总了 2018 年 1-12 月期间发布的最佳 Vue.js 开源项目。Mybridge 工作组从受欢迎程度、参与度和新鲜度三方面对它们进行了评估。这些项目的 Github Star 平均数为 2620，可见其卓越不凡。  
开源项目对程序员来说意义非凡，让我们花些时间，一起来看看这些在去年可能被你错过了的 Vue.js 开源项目吧。

# **用户界面** #

**1. Vuetify**

*  Star 数：16672
 *  GitHub：[https://github.com/vuetifyjs/vuetify][https_github.com_vuetifyjs_vuetify]
 *  介绍：Vue.js 2 的 Material 组件框架（1.0 版本）

![Image 1][]

Vuetify

**2. Weex-ui**

*  Star 数：4097
 *  GitHub：[https://github.com/alibaba/weex-ui][https_github.com_alibaba_weex-ui]
 *  介绍：一个基于 Vue.js 和 Weex 的富交互、轻量级、高性能的 UI 库，由阿里巴巴提供。

![Image 1][]

Weex-ui

**3. Eagle.js**

*  Star 数：3343
 *  GitHub：[https://github.com/Zulko/eagle.js][https_github.com_Zulko_eagle.js]
 *  介绍：使用 Vue.js 构建的幻灯片框架。

![Image 1][]

Eagle.js

**4. Vuesax**

*  Star 数：2755
 *  GitHub：[https://github.com/lusaxweb/vuesax][https_github.com_lusaxweb_vuesax]
 *  介绍：前端 Vue 组件。

![Image 1][]

Vuesax

**5. Vue-ydui**

*  Star 数：2308
 *  GitHub：[https://github.com/ydcss/vue-ydui][https_github.com_ydcss_vue-ydui]
 *  介绍：Vue2.js 移动组件库。

![Image 1][]

Vue-ydui

**6. Vue-grid-layout**

*  Star 数：2003
 *  GitHub：[https://github.com/jbaysolutions/vue-grid-layout][https_github.com_jbaysolutions_vue-grid-layout]
 *  介绍：Vue.js 的一个可拖动且可调整大小的网格布局。

![Image 1][]

Vue-grid-layout

**7. Vue-virtual-scroller**

*  Star 数：1741
 *  GitHub：[https://github.com/Akryum/vue-virtual-scroller][https_github.com_Akryum_vue-virtual-scroller]
 *  介绍：让拥有任何数据量的页面都能平滑滚动。

![Image 1][]

Vue-virtual-scroller

**8. Vue-content-loader**

*  Star 数：1345
 *  GitHub：[https://github.com/egoist/vue-content-loader][https_github.com_egoist_vue-content-loader]
 *  介绍：创建内容加载器的 SVG 组件，例如 Facebook 的卡片加载。

![Image 1][]

Vue-content-loader

**9. Mand-mobile**

*  Star 数：1391
 *  GitHub：[https://github.com/didi/mand-mobile][https_github.com_didi_mand-mobile]
 *  介绍：基于 Vue.js 2 的移动端 UI 组件库，专为金融场景设计。

![Image 1][]

Mand-mobile

**10. Vuikit**

*  Star 数：1293
 *  GitHub：[https://github.com/vuikit/vuikit][https_github.com_vuikit_vuikit]
 *  介绍：网站界面的响应式 Vue UI 库。

![Image 1][]

Vuikit

**11. Vue-design-system v2.0**

*  Star 数：1296
 *  GitHub：[https://github.com/viljamis/vue-design-system][https_github.com_viljamis_vue-design-system]
 *  介绍：基于 Vue.js 构建 UI 设计系统的开源工具。

![Image 1][]

Vue-design-system v2.0

**12. Vue-styleguidist**

*  Star 数：1088
 *  GitHub：[https://github.com/vue-styleguidist/vue-styleguidist][https_github.com_vue-styleguidist_vue-styleguidist]
 *  介绍：由 react-styleguidist 构建的带有实时样式指南的 Vue 组件。

![Image 1][]

Vue-styleguidist

**13. Heyui**

*  Star 数：934
 *  GitHub：[https://github.com/heyui/heyui][https_github.com_heyui_heyui]
 *  介绍：Web UI 库，Vue2.0。

![Image 1][]

Heyui

**14. Vue2-animate v2.0**

*  Star 数：884
 *  GitHub：[https://github.com/asika32764/vue2-animate][https_github.com_asika32764_vue2-animate]
 *  介绍：Animate.css 的 Vue 移植版本，用于 Vue 的内置过渡。

![Image 1][]

Vue2-animate v2.0

**15. Ui**

*  Star 数：841
 *  GitHub：[https://github.com/vuejs/ui][https_github.com_vuejs_ui]
 *  介绍：Vue 官方应用程序的 UI 组件。

![Image 1][]

**16. Proppy**

*  Star 数：792
 *  GitHub：[https://github.com/fahad19/proppy][https_github.com_fahad19_proppy]
 *  介绍：UI 组件的功能插件（支持 React.js 和 Vue.js）。

![Image 1][]

Proppy

**17. ZircleUI**

*  Star 数：650
 *  GitHub：[https://github.com/zircleUI/zircleUI][https_github.com_zircleUI_zircleUI]
 *  介绍：基于 Vue.js 的可缩放用户界面的前端库。

![Image 1][]

ZircleUI

**18. Vue-overdrive**

*  Star 数：439
 *  GitHub：[https://github.com/mattrothenberg/vue-overdrive][https_github.com_mattrothenberg_vue-overdrive]
 *  介绍：用于 Vue 应用程序的超简易 Magic Move 过渡效果。

![Image 1][]

Vue-overdrive

**19. Vue-argon-design-system**

*  Star 数：302
 *  GitHub：[https://github.com/creativetimofficial/vue-argon-design-system][https_github.com_creativetimofficial_vue-argon-design-system]
 *  介绍：Vue Argon 设计系统。

![Image 1][]

Vue-argon-design-system

# **Vue.js 工具** #

**20. Vue-cli**

*  Star 数：18952
 *  GitHub：[https://github.com/vuejs/vue-cli][https_github.com_vuejs_vue-cli]
 *  介绍：快速构建 Vue.js 的 CLI 3.0 版本。

![Image 1][]

Vue-cli

**21. Vue-devtools（v 4.0）**

*  Star 数：12112
 *  GitHub：[https://github.com/vuejs/vue-devtools][https_github.com_vuejs_vue-devtools]
 *  介绍：用于调试 Vue.js 应用程序的 Chrome 扩展开发工具。

![Image 1][]

Vue-devtools（v 4.0）

**22. Vue-native-core**

*  Star 数：5545
 *  GitHub：[https://github.com/GeekyAnts/vue-native-core][https_github.com_GeekyAnts_vue-native-core]
 *  介绍：Vue Native 是一个用 JavaScript 构建的跨平台原生移动应用程序的框架。

![Image 1][]

Vue-native-core

**23. Tiptap**

*  Star 数：2790
 *  GitHub：[https://github.com/scrumpy/tiptap][https_github.com_scrumpy_tiptap]
 *  介绍：Vue.js 的富文本编辑器。

![Image 1][]

Tiptap

**24. Uni-app**

*  Star 数：2276
 *  GitHub：[https://github.com/dcloudio/uni-app][https_github.com_dcloudio_uni-app]
 *  介绍：使用 Vue.js 开发跨平台应用程序的前端框架。

![Image 1][]

Uni-app

**25. Vue-rx v6.0**

*  Star 数：2284
 *  GitHub：[https://github.com/vuejs/vue-rx][https_github.com_vuejs_vue-rx]
 *  介绍：Vue.js 的 RxJS 集成。

![Image 1][]

Vue-rx v6.0

**26. Eros**

*  Star 数：1587
 *  GitHub：[https://github.com/bmfe/eros][https_github.com_bmfe_eros]
 *  介绍：一组 Vue 代码，两端原生应用程序，或者叫 us-native。

![Image 1][]

Eros

**27. Vue-wait**

*  Star 数：1266
 *  GitHub：[https://github.com/f/vue-wait][https_github.com_f_vue-wait]
 *  介绍：Vue/Vuex 及 Nuxt 应用程序的复杂加载器和进度管理器。

![Image 1][]

Vue-wait

**28. Vue-starter**

*  Star 数：1192
 *  GitHub：[https://github.com/devCrossNet/vue-starter][https_github.com_devCrossNet_vue-starter]
 *  介绍：一种用于待投产 PWA 的灵活、可扩展的固定模板，专注于性能、开发速度和最佳实践。

![Image 1][]

Vue-starter

**29. Vue-hooks**

*  Star 数：1148
 *  GitHub：[https://github.com/yyx990803/vue-hooks][https_github.com_yyx990803_vue-hooks]
 *  介绍：在 Vue 中实现试验的 React 钩子。

![Image 1][]

Vue-hooks

**30. Portal-vue**

*  Star 数：1414
 *  GitHub：[https://github.com/linusborg/portal-vue][https_github.com_linusborg_portal-vue]
 *  介绍：Vue.js 的基础组件，在组件外部、文档的任意位置渲染 DOM。

![Image 1][]

Portal-vue

**31. Vue-fullpage.js**

*  Star 数：829
 *  GitHub：[https://github.com/alvarotrigo/vue-fullpage.js][https_github.com_alvarotrigo_vue-fullpage.js]
 *  介绍：fullPage.js 的Vue.js 官方封装。

![Image 1][]

Vue-fullpage.js

**32. Vue-api-query**

*  Star 数：750
 *  GitHub：[https://github.com/robsontenorio/vue-api-query][https_github.com_robsontenorio_vue-api-query]
 *  介绍：构建 REST API 请求的方法，优雅且简单。

![Image 1][]

Vue-api-query

**33. Vuese**

*  Star 数：741
 *  GitHub：[https://github.com/vuese/vuese][https_github.com_vuese_vuese]
 *  介绍：Vue 组件文档的一站式解决方案。

![Image 1][]

Vuese

**34. Vuex-orm**

*  Star 数：724
 *  GitHub：[https://github.com/vuex-orm/vuex-orm][https_github.com_vuex-orm_vuex-orm]
 *  介绍：Vuex 插件，启用 Vuex 存储的对象关系映射。

![Image 1][]

Vuex-orm

**35. Vuex-pathify**

*  Star 数：651
 *  GitHub：[https://github.com/davestewart/vuex-pathify][https_github.com_davestewart_vuex-pathify]
 *  介绍：Vue/Vuex 插件，为 Vuex 存储提供统一的路径语法。

![Image 1][]

Vuex-pathify

**36. Vue-vr**

*  Star 数：147
 *  GitHub：[https://github.com/imudin/vue-vr][https_github.com_imudin_vue-vr]
 *  介绍：使用 Vue 构建 VR 应用程序的框架。

![Image 1][]

Vue-vr

# **项目** #

**37. Vuepress**

*  Star 数：11323
 *  GitHub：[https://github.com/vuejs/vuepress][https_github.com_vuejs_vuepress]
 *  介绍：基于 Vue 的轻量级静态网站生成器。

![Image 1][]

Vuepress

**38. Gridsome**

*  Star 数：1902
 *  GitHub：[https://github.com/gridsome/gridsome][https_github.com_gridsome_gridsome]
 *  介绍：使用 Vue.js 为 CMS 或数据构建超快的网站。

![Image 1][]

Gridsome

**39. Vue-music-webapp**

*  Star 数：1357
 *  GitHub：[https://github.com/CaiJinyc/vue-music-webapp][https_github.com_CaiJinyc_vue-music-webapp]
 *  介绍：基于 Vue 的音乐 WebApp。

![Image 1][]

Vue-music-webapp

**40. Vue-realworld-example-app**

*  Star 数：1187
 *  GitHub：[https://github.com/gothinkster/vue-realworld-example-app][https_github.com_gothinkster_vue-realworld-example-app]
 *  介绍：使用 Vue.js、Vuex、axios 和其他技术构建的典型现实应用程序。

![Image 1][]

Vue-realworld-example-app

**41. Page-transitions-travelapp**

*  Star 数：1145
 *  GitHub：[https://github.com/sdras/page-transitions-travelapp][https_github.com_sdras_page-transitions-travelapp]
 *  介绍：旅行应用程序，具有类似原生的页面过渡效果。

![Image 1][]

Page-transitions-travelapp

**42. Sample-vue-shop**

*  Star 数：918
 *  GitHub：[https://github.com/sdras/sample-vue-shop][https_github.com_sdras_sample-vue-shop]
 *  介绍：一个示例商店，展示如何使用 Vue、Stripe 和 Serverless Functions 来管理支付流程。

![Image 1][]

Sample-vue-shop

**43. Vuegg**

*  Star 数：853
 *  GitHub：[https://github.com/vuegg/vuegg][https_github.com_vuegg_vuegg]
 *  介绍：Vue GUI 生成器，模拟和代码可以一次性搞定。

![Image 1][]

Vuegg

**44. Vue-filepond**

*  Star 数：467
 *  GitHub：[https://github.com/pqina/vue-filepond][https_github.com_pqina_vue-filepond]
 *  介绍：FilePond 的一个适配器组件，一个 JavaScript 库，可以上传任何东西，加快上传速度并对图像进行优化，同时提供了非常顺畅的用户体验。

![Image 1][]

Vue-filepond

**45. Monimo**

*  Star 数：230
 *  GitHub：[https://github.com/altinselimi/monimo][https_github.com_altinselimi_monimo]
 *  介绍：类似 Netflix 的 Web 应用程序，用于观看动画。

![Image 1][]

Monimo

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[https_github.com_vuetifyjs_vuetify]: https://github.com/vuetifyjs/vuetify
[https_github.com_alibaba_weex-ui]: https://github.com/alibaba/weex-ui
[https_github.com_Zulko_eagle.js]: https://github.com/Zulko/eagle.js
[https_github.com_lusaxweb_vuesax]: https://github.com/lusaxweb/vuesax
[https_github.com_ydcss_vue-ydui]: https://github.com/ydcss/vue-ydui
[https_github.com_jbaysolutions_vue-grid-layout]: https://github.com/jbaysolutions/vue-grid-layout
[https_github.com_Akryum_vue-virtual-scroller]: https://github.com/Akryum/vue-virtual-scroller
[https_github.com_egoist_vue-content-loader]: https://github.com/egoist/vue-content-loader
[https_github.com_didi_mand-mobile]: https://github.com/didi/mand-mobile
[https_github.com_vuikit_vuikit]: https://github.com/vuikit/vuikit
[https_github.com_viljamis_vue-design-system]: https://github.com/viljamis/vue-design-system
[https_github.com_vue-styleguidist_vue-styleguidist]: https://github.com/vue-styleguidist/vue-styleguidist
[https_github.com_heyui_heyui]: https://github.com/heyui/heyui
[https_github.com_asika32764_vue2-animate]: https://github.com/asika32764/vue2-animate
[https_github.com_vuejs_ui]: https://github.com/vuejs/ui
[https_github.com_fahad19_proppy]: https://github.com/fahad19/proppy
[https_github.com_zircleUI_zircleUI]: https://github.com/zircleUI/zircleUI
[https_github.com_mattrothenberg_vue-overdrive]: https://github.com/mattrothenberg/vue-overdrive
[https_github.com_creativetimofficial_vue-argon-design-system]: https://github.com/creativetimofficial/vue-argon-design-system
[https_github.com_vuejs_vue-cli]: https://github.com/vuejs/vue-cli
[https_github.com_vuejs_vue-devtools]: https://github.com/vuejs/vue-devtools
[https_github.com_GeekyAnts_vue-native-core]: https://github.com/GeekyAnts/vue-native-core
[https_github.com_scrumpy_tiptap]: https://github.com/scrumpy/tiptap
[https_github.com_dcloudio_uni-app]: https://github.com/dcloudio/uni-app
[https_github.com_vuejs_vue-rx]: https://github.com/vuejs/vue-rx
[https_github.com_bmfe_eros]: https://github.com/bmfe/eros
[https_github.com_f_vue-wait]: https://github.com/f/vue-wait
[https_github.com_devCrossNet_vue-starter]: https://github.com/devCrossNet/vue-starter
[https_github.com_yyx990803_vue-hooks]: https://github.com/yyx990803/vue-hooks
[https_github.com_linusborg_portal-vue]: https://github.com/linusborg/portal-vue
[https_github.com_alvarotrigo_vue-fullpage.js]: https://github.com/alvarotrigo/vue-fullpage.js
[https_github.com_robsontenorio_vue-api-query]: https://github.com/robsontenorio/vue-api-query
[https_github.com_vuese_vuese]: https://github.com/vuese/vuese
[https_github.com_vuex-orm_vuex-orm]: https://github.com/vuex-orm/vuex-orm
[https_github.com_davestewart_vuex-pathify]: https://github.com/davestewart/vuex-pathify
[https_github.com_imudin_vue-vr]: https://github.com/imudin/vue-vr
[https_github.com_vuejs_vuepress]: https://github.com/vuejs/vuepress
[https_github.com_gridsome_gridsome]: https://github.com/gridsome/gridsome
[https_github.com_CaiJinyc_vue-music-webapp]: https://github.com/CaiJinyc/vue-music-webapp
[https_github.com_gothinkster_vue-realworld-example-app]: https://github.com/gothinkster/vue-realworld-example-app
[https_github.com_sdras_page-transitions-travelapp]: https://github.com/sdras/page-transitions-travelapp
[https_github.com_sdras_sample-vue-shop]: https://github.com/sdras/sample-vue-shop
[https_github.com_vuegg_vuegg]: https://github.com/vuegg/vuegg
[https_github.com_pqina_vue-filepond]: https://github.com/pqina/vue-filepond
[https_github.com_altinselimi_monimo]: https://github.com/altinselimi/monimo