優(yōu)選七個用于vue開發(fā)的JS庫
前言
借助開源庫加速 Vue
項目的開發(fā)進度是現(xiàn)代前端開發(fā)比較常見的方式,平常收集一些 JavaScript
庫介紹,在遇到需要的時候可以信手拈來。Vue
生態(tài)有很多不錯的依賴庫或者組件,是使用 Vue
開發(fā)前端的原因之一。接下來將會介紹七個 Vue
項目中會用到的 JavaScript
庫。
一、vueuse
這是 GitHub 上星最多的庫之一,擁有超過 12.8k
顆星,這是一組基于組合式 API
的實用函數(shù)庫。它的初衷就是將一切原本并不支持響應(yīng)式的 JS API
變得支持響應(yīng)式,省去程序員自己寫相關(guān)代碼。
import { useLocalStorage, useMouse, usePreferredDark } from "@vueuse/core"; export default { setup() { // tracks mouse position const { x, y } = useMouse(); // is user prefers dark theme const isDark = usePreferredDark(); // persist state in localStorage const store = useLocalStorage("my-storage", { name: "Apple", color: "red", }); return { x, y, isDark, store }; }, };
項目地址:https://github.com/vueuse/vueuse
二、vue-js-modal
這是一個易于使用、高度可定制的 Vue.js
模態(tài)庫,該庫支持靜態(tài)
和動態(tài)
兩種類型的模態(tài),靜態(tài)是通過模板明確定義的,動態(tài)是根據(jù)傳遞給“顯示模態(tài)”函數(shù)的配置生成的。這個庫在 Github 上有超過 4.2k
星。
項目地址:https://github.com/euvl/vue-js-modal
三、vue-wait
這個庫可以在沒有任何沖突的情況下控制頁面上的各種加載狀態(tài)。它的核心原理是管理一個具有多個加載狀態(tài)的數(shù)組(或者一個 Vuex
存儲)。集成加載器組件開始監(jiān)聽其注冊的加載器并立即進入加載狀態(tài)。這個庫在 Github 上有超過 1.9k
顆星。
項目地址:https://github.com/f/vue-wait
四、good-table
表格是項目開發(fā)中最常用的組件之一,這是一個易于使用的強大數(shù)據(jù)表,具有高級自定義功能,包括排序、列過濾、分頁、分組等。它在 GitHub 上擁有超過 2k 星。
項目地址:https://github.com/xaksis/vue-good-table
五、vue-notification
向用戶顯示消息是應(yīng)用程序的基本功能之一,這個庫將幫助構(gòu)建漂亮的通知。它提供了許多功能,如動畫、自定義位置、自定義樣式等等。這個庫在 Github 上有超過 2.3K
顆星。
項目地址:https://github.com/euvl/vue-notification
六、tree select
這是一個帶有嵌套選項的多選組件。它包括許多功能,如支持嵌套選項的單選和多選、模糊匹配、異步搜索、延遲加載(僅在需要時加載深層選項的數(shù)據(jù))等等。它在 GitHub 上擁有超過 2.6K 顆星。
項目地址:https://github.com/riophae/vue-treeselect
七、egjs-infinite grid
如果必須使用網(wǎng)格布局,那么這個庫是一個很好的資源,該庫用于根據(jù)網(wǎng)格類型無限排列包括內(nèi)容的元素。
import { MasonryInfiniteGrid } from "@egjs/infinitegrid"; function getItems(nextGroupKey, count) { const nextItems = []; for (let i = 0; i < count; ++i) { const num = nextGroupKey * count + i; nextItems.push(`<div class="item"></div>`); } return nextItems; } const ig = new MasonryInfiniteGrid(".container", { gap: 5, }); ig.on("requestAppend", (e) => { const nextGroupKey = (+e.groupKey || 0) + 1; ig.append(getItems(nextGroupKey, 10), nextGroupKey); }); ig.renderItems();
項目地址:https://github.com/naver/egjs-infinitegrid
到此這篇關(guān)于JavaScript優(yōu)選七個用于vue開發(fā)庫的文章就介紹到這了,更多相關(guān)JS庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue數(shù)據(jù)增刪改查與表單驗證的實現(xiàn)流程介紹
這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗證的實現(xiàn),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-10-10vue-pdf插件實現(xiàn)pdf文檔預(yù)覽方式(自動分頁預(yù)覽)
這篇文章主要介紹了vue-pdf插件實現(xiàn)pdf文檔預(yù)覽方式(自動分頁預(yù)覽),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03vue之帶參數(shù)跳轉(zhuǎn)打開新頁面、新窗口
這篇文章主要介紹了vue之帶參數(shù)跳轉(zhuǎn)打開新頁面、新窗口方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序中的一個重要組成部分,詞云是一種非常流行的數(shù)據(jù)可視化形式,可以用來展示文本數(shù)據(jù)中的主題和關(guān)鍵字,本文我們將介紹如何在Vue中使用詞云庫進行數(shù)據(jù)可視化詞云展示和詞云生成,需要的可以參考一下2023-06-06