值得關注的 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個方案及實現

---

• 更多文章...