20 个值得学习的 Vue 开源项目

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

Vue 相对不于 React 的一个优点是它易于理解和学习，且在国内占大多数。咱们可以在 Vue 的帮助下创建任何 Web 应用程序。因此，时时了解一些新出现又好用的Vue 开源项目也是挺重要，一方面可以帮助咱们更加高效的开发，另一方面，咱们也可以模范学习其精华部分。

接下来看看新出的有哪些好用的开源项目。

uiGradients

网址： http://uigradients.com/

GitHub： https://github.com/ghosh/uiGr...

GitHub Stars: 4.6k

彩色阵列和出色的UX使是这个项目的一个亮点，渐变仍然是网页设计中日益增长的趋势。咱们可以选择所需的颜色，并可以获得所有可能的渐变，并获取对应的 CSS 代码，赶紧收藏起来吧。

CSSFX

CSS 过度效果的集合

网址： https://cssfx.dev

GitHub： https://github.com/jolaleye/c...

GitHub Stars: 3.5k

图片描述

CSSFX 里面有很多 CSS 过滤效果，咱们可以根据需求选择特定的动画，点击对应的效果即可看到生成的 CSS 代码，动手搞起来吧。

Sing App Vue Dashboard

一个管理模板

网址： https://flatlogic.com/templat...

GitHub： https://github.com/flatlogic/...

GitHub Stars: 254

事例：https://flatlogic.com/templat...

文档：https://demo.flatlogic.com/si...

这是基于最新 Vue 和 Bootstrap 免费和开源的管理模板，其实跟咱们国内的 vue-admin-template 差不多。咱们不一定要使用它，但可以研究学习源码，相信可以学到很多实用的技巧，加油少年。

Vue Storefront

网址： https://www.vuestorefront.io

GitHub： https://github.com/DivanteLtd...

GitHub Stars: 5.8k

这是一个PWA，可以连接到任何后端(或几乎任何后端)。这个项目的主要优点是使用了无头架构。这是一种全面的解决方案，为咱们提供了许多可能性(巨大的支持稳步增长的社区，服务器端渲染，将改善网页SEO，移动优先的方法和离线模式。

Faviator

图标生成的库

网址： https://www.faviator.xyz

GitHub： https://www.faviator.xyz/play...

GitHub Stars: 94

如果需要创建一个图标增加体验度。可以使用任何 Google 字体以及任何颜色。只需通过首选的配置，然后选择PNG，SVG或JPG格式即可。

iView

Vue UI 组件库

网址： https://iviewui.com/

GitHub： https://github.com/iview/iview

GitHub Stars: 22.8k

不断迭代更新使这组UI组件成为具有任何技能水平的开发人员的不错选择。

要使用iView，需要对单一文件组件有充分的了解，该项目具有友好的API和大量文档。

Postwoman

API请求构建器

网址： https://postwoman.io/

GitHub： https://github.com/liyasthoma...

GitHub Stars: 10.5k

这个与 Postman 类似。它是免费的，具有许多参与者，并且具有多平台和多设备支持。这个工具真的非常快，并且有大量的更新。该工具的创建者声称在不久的将来会有更多功能。

Vue Virtual Scroller

快速滚动

网址： https://akryum.github.io/vue-...

GitHub： https://github.com/Akryum/vue...

GitHub Stars: 3.4k

Vue Virtual Scroller具有四个主要组件。 RecycleScroller可以渲染列表中的可见项。如果咱们不知道数据具体的数量，最好使用DynamicScroller。 DynamicScrollerItem将所有内容包装在DynamicScroller中（以处理大小更改）。 IdState简化了本地状态管理（在RecycleScroller内部）。