译者：前端小智
作者：Nastassia Ovchinnikova
来源：flatlogic.com

个人专栏 ES6 深入浅出已上线，深入ES6 ，通过案例学习掌握 ES6 中新特性一些使用技巧及原理，持续更新中，←点击可订阅。

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

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内部）。

Mint UI

移动端的 UI 库

网址： http://mint-ui.github.io/#!/en

GitHub： https://github.com/ElemeFE/mi...

GitHub Stars: 15.2k

使用现成的CSS和JS组件更快地构建移动应用程序。使用此工具，咱们不必承担文件大小过大的风险，因为可以按需加载。动画由CSS3处理，由此来提高性能。

V Calendar

用于构建日历的无依赖插件

网址： https://vcalendar.io

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

GitHub Stars: 1.6k

您可以选择不同的视觉指示器来装饰日历。 V Calendar还为咱们提供了三种日期选择模式：

  • 单选
  • 多选
  • 日期范围

Vue Design System

一组UI工具

网址： https://vueds.com/

GitHub： https://github.com/viljamis/v...

GitHub Stars: 1.7k

这是一种组织良好的工具，对于任何web开发团队来说，它的命名都很容易理解。其中一个很大的优点是使用了更漂亮的代码格式化器，它可以在提交到Git之前自动排列代码。

Proppy

UI组件的功能道具组合

网址： https://proppyjs.com

GitHub： https://github.com/fahad19/pr...

GitHub Stars: 856

ProppyJS 是一个很小的库，用于组合道具，它附带了各种集成包，让您可以自由地使用它流行的渲染库。

我们的想法是首先将Component的行为表达为props，然后使用Proppy的相同API将其连接到您的Component（可以是React，Vue.js或Preact）。

API还允许您访问其他应用程序范围的依赖项（如使用Redux的商店），以方便组件树中的任何位置。

Light Blue Vue Admin

vue 后台展示模板

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

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

GitHub Stars: 79

事例: https://demo.flatlogic.com/li...

文档: https://demo.flatlogic.com/li...

模板是用Vue CLI和Bootstrap 4构建的。从演示中可以看到，这个模板有一组非常基本的页面:排版、地图、图表、聊天界面等。如果咱们需要一个扩展的模板，可以看看Light Blue Vue Full，它有60多个组件，无 jquery，有两个颜色主题。

Vue API Query

为 REST API 构建请求

GitHub: https://github.com/robsonteno...
GitHub Stars: 1.1k

关于这个项目没什么好说的。它所做的与描述行中所写的完全一样:它帮助咱们构建REST API的请求。

Vue Grid Layout

Vue 的网格布局

Website: https://jbaysolutions.github....
GitHub: https://github.com/jbaysoluti...
GitHub Stars: 3.1k

所有网格相关问题的简单解决方案。它有静态的、可调整大小的和可拖动的小部件。还是响应和布局可以恢复和序列化。如果还需要再添加一个小部件，则不必重新构建所有网格。

Vue Content Loader

创建一个占位符加载

Website: http://danilowoz.com/create-v...
GitHub: https://github.com/egoist/vue...
GitHub Stars: 2k

当咱们开发网站或者 APP 时，遇到内容过多加载速度慢时，会导致用户打开页面有大量空白页，vue-content-loader正是解决这个问题的一个组件，使加载内容之前生成一个dom模板，提高用户体验。

Echarts with Vue2.0

数据可视化

Website: https://simonzhangiter.github...
GitHub: https://github.com/SimonZhang...
GitHub Stars: 1.3k

在图片中，咱们可以看到非常漂亮的图表。这个项目使任何数据都更具可读性，更容易理解和解释。它允许咱们在任何数据集中轻松地检测趋势和模式。

Vue.js Modal

高度可定制的模态框

Website: http://vue-js-modal.yev.io/
GitHub: https://github.com/euvl/vue-j...
GitHub Stars: 2.9k

可以在该网站上查看所有不同类型的模态。 有15个按钮，按任意一个按钮，看到一个模态示例。

Vuesax

框架组件

Website: https://lusaxweb.github.io/vu...
GitHub: https://github.com/lusaxweb/v...
GitHub Stars: 3.7k

这个项目在社区中很受欢迎。 它使咱们可以为每个组件设计不同的风格。 Vuesax的创建者强调，每个Web开发人员在进行Web设计时都应有选择的自由。

Vue2 Animate

vue2.0 —使用animate.css 构建项目和创建组件

Website: https://the-allstars.com/vue2...
GitHub: https://github.com/asika32764...
GitHub Stars: 1.1k

这个库是跨浏览器的，咱们可以选择从5种类型的动画: rotate，slide，fade，bounce和zoom。在网站上有一个演示。动画的默认持续时间是1秒，但是咱们可以自定义该参数。

Vuetensils

Vue.js的工具集

Website: https://vuetensils.stegosourc...
GitHub: https://github.com/stegosourc...
GitHub Stars: 111

这个UI库有一个标准的功能，但是最酷的是它没有额外的样式。你可以让设计尽可能的个性化，应用所有的需求。只需编写需要的样式，将其添加到项目中，并包含需要的尽可能多的组件。

编辑中可能存在的bug没法实时知道，事后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：

https://flatlogic.com/blog/ne...
https://flatlogic.com/blog/ne...

交流

干货系列文章汇总如下，觉得不错点个Star，欢迎 加群 互相学习。

https://github.com/qq449245884/xiaozhi

因为篇幅的限制，今天的分享只到这里。如果大家想了解更多的内容的话，可以去扫一扫每篇文章最下面的二维码，然后关注咱们的微信公众号，了解更多的资讯和有价值的内容。

20 个新的且值得关注的 Vue 开源项目的更多相关文章

  1. 30个值得关注的Vue开源项目

    译者按: 学习优秀的开源项目是提高代码水平最有效的方式. 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译 ...

  2. GitHub 上值得关注的 iOS 开源项目

    GitHub 上值得关注的 iOS 开源项目 原文链接:http://www.jianshu.com/p/e5dfe1a09611 GitHub 上值得关注的 iOS 开源项目 —— 由 红旗下的蛋  ...

  3. GitHub上值得关注的iOS开源项目

    1.AFNetworking地址:https://github.com/AFNetworking/AFNetworking用于网络请求 2.JSONKit地址:https://github.com/j ...

  4. iOS：GitHub上值得关注的iOS开源项目

    1.AFNetworking地址:https://github.com/AFNetworking/AFNetworking用于网络请求 2.JSONKit地址:https://github.com/j ...

  5. Atitit python3.0 3.3 3.5 3.6 新特性 Python2.7新特性1Python 3_x 新特性1python3.4新特性1python3.5新特性1值得关注的新特性1Pyth

    Atitit python3.0 3.3 3.5 3.6 新特性 Python2.7新特性1 Python 3_x 新特性1 python3.4新特性1 python3.5新特性1 值得关注的新特性1 ...

  6. Github 上 10 个值得学习的 Springboot 开源项目

    Spring Boot 几乎继承了所有 Spring 框架的优点,同时还可以让项目的配置更简化.编码更简化.部署更方便.近两年受到很多开发者的追捧,也是火热的不行! 下面给大家整理了 10 个 Git ...

  7. 2018年最值得关注的30个Vue开源项目

    译者按: 学习优秀的开源项目是提高代码水平最有效的方式. 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译 ...

  8. 值得研究的J2EE开源项目推荐

    导读:笔者在学习J2EE的过程中发现了一些很有用,而且很值得学习的开源项目,在此推荐给大家. 关键词:J2EE 开源项目 J2SE JBoss SOA EJB   这篇文章写在我研究J2SE.J2EE ...

  9. 加密解密、食谱、新冠序列，各种有趣的开源项目Github上都有

    Github上是我们程序员学习开源代码.提升编程技巧的好地方.好学校,但是除了学习,小伙伴们有没有发现过Github上一些特别有意思的项目呢? 今天TJ君就来和大家分享几个自认为特别有趣的开源项目: ...

随机推荐

  1. 转 C#中哈希表(HashTable)的用法详解

    看了一遍有关哈希表的文字,作者总结的真是不错 .收藏起来 1.  哈希表(HashTable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提 ...

  2. 接入HikariCP遇到问题

    老Tomcat项目在接入HikariCP时遇到报错: Caused by: java.lang.AbstractMethodError: com.mysql.jdbc.Connection.isVal ...

  3. （原创）SoapUI学习（2）- POST请求

    1.新建Project,右键Projects->New REST Project,可以不填直接点击OK,之后通过rename重命名.(如果这里添加URL,则直接达到第三步的图) 2.右键新建的工 ...

  4. 03-书城bean类中的id缺少get属性

    错误:id属性不可读 解决方法: 测试了删除的整个流程,dao-service-servlet ,数据库也能正常测试 想不出来为什么会bean类报错 后来仔细一看id的get属性不知道什么时候被误删了 ...

  5. Euler Sums系列（一）

    \[\Large\sum_{n=1}^{\infty} \frac{H_{n}}{2^nn^4}\] \(\Large\mathbf{Solution:}\) Let \[\mathcal{S}=\s ...

  6. lambda表达式在解决java后台分组排序时的应用

    需求:按照起始日期查询出数据库里一段连续日期的住院信息. 问题:数据库里的住院信息可能不是完整的,也就是在给出的日期区间里只有若干天的数据,缺少某些日期的数据. 解决: 1.需要我们先按日期分组查出数 ...

  7. fiddler的代理设置

    fiddler通过监听系统的8888端口实现对系统浏览器发出的http报文进行截获监听,因此要使fiddler能够监听到浏览器数据,需要对浏览器设置代理端口 浏览器 <--8888端口代理--& ...

  8. python序列化及其相关模块（json,pickle,shelve,xml）详解

    什么是序列化对象? 我们把对象(变量)从内存中编程可存储或传输的过程称之为序列化,在python中称为pickle,其他语言称之为serialization ,marshalling ,flatter ...

  9. Centos610安装MVN

    1.下载mav安装 下载免安装版上传linux cd /opt/maven mkdir repository cd apche-maven-3.3.9/conf vi settings.xml  设置 ...

  10. ASP.NET Core搭建多层网站架构【7-使用NLog日志记录器】

    2020/01/29, ASP.NET Core 3.1, VS2019, NLog.Web.AspNetCore 4.9.0 摘要:基于ASP.NET Core 3.1 WebApi搭建后端多层网站 ...