20 個值得學習的 Vue 開源專案

譯者：前端小智
作者：Nastassia Ovchinnikova
來源：flatlogic.com

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

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