8 個(gè)令人驚嘆的 Vue.js UI 組件，說不定用得上！

作者：張張 2022-01-26 13:00:07

在 Web 應(yīng)用程序開發(fā)方面，Vue.js 正迅速成為開發(fā)人員的最愛。這個(gè)現(xiàn)代、新鮮的 JavaScript 庫(kù)它在 GitHub 上有超過 123,000 顆星，對(duì)于開發(fā)人員來說是一個(gè)引人注目的選擇，因?yàn)樗苋菀准傻浆F(xiàn)有項(xiàng)目中。它的速度很快，它非常強(qiáng)大。你可以用它從頭開始建立一個(gè)動(dòng)態(tài)的、可擴(kuò)展的、可維護(hù)的單頁面應(yīng)用程序。

作為一個(gè) JavaScript 框架，Vue.js 允許您輕松地將動(dòng)態(tài)數(shù)據(jù)渲染到 DOM，將數(shù)據(jù)綁定到 DOM 元素，以及管理/維護(hù)應(yīng)用程序的狀態(tài)(本地存儲(chǔ))，而無需用戶重新加載瀏覽器。它是首選，因?yàn)樗禽p量級(jí)的，模塊化的，需要最少的配置。它的速度也非常快，文件大小也很低。開發(fā)人員可以很容易地把它放入任何項(xiàng)目或現(xiàn)有的框架中。

隨著Vue.js逐漸成為更多開發(fā)者的首選框架，這里有8個(gè)值得關(guān)注的UI組件，希望能在2019年整合到你的項(xiàng)目中。在每個(gè)組件的末尾，我都添加了該組件GitHub倉(cāng)庫(kù)賬戶的鏈接，以讓你可以做出貢獻(xiàn)。

Sweet Modal[1]

Modals是一個(gè)很好的方法，可以為你的Web應(yīng)用程序的用戶體驗(yàn)添加一些不同的東西。Sweet Modal為你提供了許多偉大的模態(tài)選擇，許多Modal肯定會(huì)使你的Web應(yīng)用與眾不同。它們可以用于通過表單收集數(shù)據(jù)或只是傳遞警報(bào)，每個(gè)項(xiàng)目都需要一個(gè)漂亮的Modal。在GitHub上有超過500顆星，這絕對(duì)是一個(gè)值得關(guān)注的項(xiàng)目。

GitHub: https://github.com/adeptoas/sweet-modal-vue

Vue Scrollama[2]

Vue Scrollama 是一個(gè)組件，可讓您輕松地在網(wǎng)頁上進(jìn)行滾動(dòng)驅(qū)動(dòng)交互，從而為用戶提供類似故事的體驗(yàn)。有了這個(gè)組件，視覺效果就說明了一切。它也是非常可定制的，可以制作一些令人驚嘆的Web應(yīng)用程序。

GitHub: https://github.com/shenoy/vue-scrollama

Vue-parallax[3]

視差是為你的網(wǎng)絡(luò)應(yīng)用添加活力和獨(dú)特性的好方法，Vue-parallax讓你輕松地在你的Vue項(xiàng)目中實(shí)現(xiàn)視差，并且它是完全可定制的。這個(gè)組件在 GitHub 上有超過 300 顆星，它有定期維護(hù)和一個(gè)正在成長(zhǎng)的新興社區(qū)。

GitHub: https://github.com/apertureless/vue-parallax

Vue-typer[4]

打字機(jī)效果有一些特別之處，它吸引了用戶，就像大多數(shù)優(yōu)秀的 UI 組件一樣，它吸引了用戶，創(chuàng)造了更好的體驗(yàn)。不要忘記，該組件是非常可定制的，并且有許多選項(xiàng)可以更改字體類型、大小、打字速度和許多其他東西，以使您的 Web 應(yīng)用程序完美?

GitHub: https://github.com/cngu/vue-typer

Vue-slider[5]

圖片吸引著用戶，而滑塊是展示圖片的好方法。Vue-slider為我們提供了一個(gè)非常現(xiàn)代的響應(yīng)式 "Netflix "風(fēng)格的滑塊，肯定會(huì)讓你的網(wǎng)絡(luò)應(yīng)用脫穎而出。

GitHub: https://github.com/fanyeh/vue-slider

Vue.js Popover[6]

彈出窗口和工具提示——重要但被低估的 UI 組件。這些是向用戶顯示信息的好方法，不會(huì)分散他們對(duì)您想要呈現(xiàn)給他們的主要內(nèi)容的注意力。Vue.js popover讓我們可以將創(chuàng)意和動(dòng)畫工具提示和彈出窗口添加到 Web 應(yīng)用程序的不同元素中。

GitHub: https://github.com/euvl/vue-js-popover