值得关注的 Vue.js开源项目

做者：Nastassia Ovchinnikova

翻译：疯狂的技术宅

原文：https://flatlogic.com/blog/ne...

未经容许严禁转载

Vue.js 框架是由经验丰富的开发人员建立的，具备可靠的社区支持，丰富的功能，并且是轻量级的。

Vue.js 的另外一个大优势是易于理解和学习。能够在 Vue 框架的帮助下建立任何 Web 应用。所以我建议你了解一些 Vue 开源项目。

这些项目中有一些由于其在 2019 年广受欢迎而被列入此列表。其中一些项目在 GitHub 上没有那么多的Star，可是在我看来，这些项目仍然值得注意。

uiGradients

渐变效果的集合

Website: http://uigradients.com/

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

GitHub Stars: 4.6k

丰富的色彩阵列和出色的 UX 使该项目成为个人最爱之一。渐变效果仍然是网页设计中日益增加的趋势。你能够选择所需的颜色，并查看全部可能的渐变。该收藏很是庞大，由于它是社区贡献的。你能够轻松选择渐变效果并复制其 CSS 代码。

各类模版：https://flatlogic.com/templates

CSSFX

CSS 效果的集合

Website: https://cssfx.dev

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

GitHub Stars: 5.3k

另外一个轻松地向 Web 应用添加少许但重要的细节的项目。该项目使你能够查看每一个 CSS 效果的预览，只需单击选择的效果便可查看代码。

Sing App Vue 仪表板

管理模板

Website: https://flatlogic.com/templat...

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

GitHub Stars: 244

Demo：https://flatlogic.com/templat...

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

这是免费的开源管理模板，使用最新的 Vue 和 Bootstrap 构建。现在最经常使用的作法是使用管理仪表板模板，而不是从头开始构建全部内容。在评估管理模板时，我想到的主要标准是：定制的可能性和文档的完整性。 Sing App Vue 将会为你提供可靠的建议，帮助你快速入门所提供全部必要的图表、表单、表格、地图等。

Vue Storefront

A PWA storefront

PWA 网店

Website: https://www.vuestorefront.io

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

GitHub Stars: 5.8k

这是一个 PWA 应用，能够与任何后端（或几乎任何后端）链接。该项目的主要优点是使用无头架构。这是一个全面的解决方案，为你提供了不少可能性（因为不断增加的社区的大力支持，将改进你的服务器端渲染的 SEO 效果、移动优先方法和脱机模式。

Faviator

一个生成图标的库

Website: https://www.faviator.xyz

Demo: https://www.faviator.xyz/play...

GitHub: https://github.com/faviator/f...

GitHub Stars: 94

若是你须要建立一个图标的向导。可使用任何 Google 字体以及任何颜色。只需经过首选的配置，而后选择 PNG，SVG 或 JPG 格式便可。

iView

Vue UI 组件工具包

Website: https://iviewui.com/

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

GitHub Stars: 22.8k

不断的更新使这组 UI 组件成为具备不一样技能水平的开发人员的不错选择。可是你应该知道它不支持IE8。

要开始使用 iView，请确保你对单文件组件有充分的了解。该项目具备友好的 API 和大量文档。

Postwoman

• API 请求构建器*

Website: https://postwoman.io/

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

GitHub Stars: 10.5k

这是 Postman 的替代方案。它是免费的，具备许多人参与开发，而且支持多平台和多设备。这个工具真的很是快，而且有大量的更新。该工具的建立者声称在不久的未来会有更多功能。你能够经过添加自动完成功能、更多方法和 HTTP 支持来帮助该项目。请加入社区！

Vue Virtual Scroller

快速滚动条

Website: 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

移动端界面元素

Website: http://mint-ui.github.io/#!/en

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

GitHub Stars: 15.2k

使用现成的 CSS 和 JS 组件可以更快地构建移动应用。使用此工具，你没必要担忧生成大文件的风险，由于你能够按需加载。动画由 CSS3 处理。要使用 Mint UI 须要安装 npm。你应该尝试预测应用程序所需的全部组件，并仅导入必要的组件。完整的代码（包括 CSS 文件）仅 30kb。

V Calendar

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

Website: https://vcalendar.io

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

GitHub Stars: 1.6k

你能够选择不一样的视觉指示器来装饰日历。 V Calendar 还为你提供了三种日期选择模式：

• 单一日期；
• 多个日期；
• 日期范围选择模式。

这个日历插件适合移动设备使用，有不一样的颜色主题，而且能够适应不一样的屏幕尺寸。

Vue 设计系统

一组 UI 工具

Website: https://vueds.com/

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

GitHub Stars: 1.7k

这是组织良好的工具，对于任何 Web 开发团队而言，其名称都很容易理解。因为可以导出为 NPM 依赖项，所以你能够在任何 Vue 项目中进行自定义设计。最大的好处是可以使用 Prettier 代码格式化程序，该格式化程序在提交到 Git 以前自动格式化你的代码。

Proppy

用于建立 prop 的库

Website: https://proppyjs.com

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

GitHub Stars: 855

prop 使咱们可以将数据传递到不一样的组件。prop 没法更改或沿组件树向上传递。所以 Proppy 可帮助你获取各类资源，而后做为 prop 进行组合，而后将其传递给任何组件。

Light Blue Vue Admin

用于管理信息中心的 Vue.js 模板

Website: https://flatlogic.com/templat...

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

GitHub Stars: 76

演示：https://demo.flatlogic.com/li...

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

该模板是用 Vue CLI 和 Bootstrap 4 构建的。从演示中能够看到，该模板具备一组很是基本的页面：排版、地图、图表、聊天等。若是你须要扩展模板，则能够看一下有着 60 多个组件的 Light Blue Vue Full，它不含 jQuery，而且具备两个颜色主题。

Vue API Query

构建针对 REST API 的请求

GitHub: https://github.com/robsonteno...

GitHub Stars: 1.1k

这个项目没什么可说的。它彻底符合其广告描述中的内容：帮助你建立 REST API 的请求。

Vue Grid Layout

Vue.js 的网格布局

Website: https://jbaysolutions.github....

GitHub: https://github.com/jbaysoluti...

GitHub Stars: 3.1k

解决全部与网格有关的问题的简单解决方案。它具备静态、可调整大小和可拖动的小部件。它反应灵敏，而且能够还原和序列化布局。若是你须要再添加一个小部件，则无需从新构建全部网格。

Vue Content Loader

Create a placeholder loading

建立占位符加载

Website: http://danilowoz.com/create-v...

GitHub: https://github.com/egoist/vue...**

GitHub Stars: 2k

要了解有关该项目的全部信息，你先能够简单地使用它的在线工具。只需设置诸如宽度和高度、速度和配色方案之类的优选属性，就能够享受可自定义的内容加载器。能够借助 yarn 和纯 SVG 格式（无需JS）快速安装。

Vue2.0 图表

数据可视化

Website: https://simonzhangiter.github...

GitHub: https://github.com/SimonZhang...

GitHub Stars: 1.3k

在图片中，你能够看到很是漂亮的图表。这个项目使任何数据都更具可读性，使咱们更易于理解和解释。它使咱们可以轻松检测任何数据集中的趋势和模式。

Vue.js Modal

高度可定制的 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 设计时都应该有选择的自由。你首先须要一个 CDN 库并连接到其 CSS 文件。

Vue2 Animate

Animate.css 的端口

Website: https://the-allstars.com/vue2...

GitHub: https://github.com/asika32764...

GitHub Stars: 1.1k

这个库是跨浏览器的。你能够从 5 种动画类型中进行选择：旋转、滑动、淡入淡出、弹跳和缩放。在其网站上有一个演示。动画的默认持续时间为 1 秒，可是你能够自定义这个参数。

Vuetensils

Vue.js 的工具集

Website: https://vuetensils.stegosource.com

GitHub: https://github.com/stegosourc...

GitHub Stars: 111

这是个标准界面库，但其优势在于它没有多余的样式。你能够按照自定义的方式进行设计，并应用全部品牌要求。只需编写所需的样式，将其添加到项目中，并根据须要包含尽量多的组件。

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

---

欢迎继续阅读本专栏其它高赞文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13个帮你提升开发效率的现代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？从调用栈到Promise你须要知道的一切
• WebSocket实战：在 Node 和 React 之间进行实时通讯
• 关于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30分钟用Node.js构建一个API服务器
• Javascript的对象拷贝
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程彻底指南
• 把HTML转成PDF的4个方案及实现

---

• 更多文章...