【整理分享】vue項目上可用的7個實用JS庫-世界快播報

借助開源庫加速VUE項目的開發進度是現代前端開發比較常見的方式，平常收集一些JavaScript庫介紹，在遇到需要的時候可以信手拈來。【相關推薦：vuejs視頻教程、web前端開發】

【資料圖】

VUE 生態有很多不錯的依賴庫或者組件，是使用VUE開發前端的原因之一。

1. vueuse

這是 GitHub 上星最多的庫之一，擁有超過 12.8k顆星，這是一組基于組合式 API 的實用函數庫。

它的初衷就是將一切原本并不支持響應式的 JS API 變得支持響應式，省去程序員自己寫相關代碼。

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 };    },};

GitHub：github.com/vueuse/vueu…

2. vue-js-modal

這是一個易于使用、高度可定制的 Vue.js 模態庫，該庫支持靜態和動態兩種類型的模態，靜態是通過模板明確定義的，動態是根據傳遞給“顯示模態”函數的配置生成的。這個庫在 Github 上有超過 4.2k星。

GitHub：github.com/euvl/vue-js…

3. vue-wait

這個庫可以在沒有任何沖突的情況下控制頁面上的各種加載狀態。它的核心原理是管理一個具有多個加載狀態的數組（或者，可選地，一個 Vuex 存儲）。集成加載器組件開始監聽其注冊的加載器并立即進入加載狀態。這個庫在 Github 上有超過 1.9k顆星。

GitHub：github.com/f/vue-wait

4. good-table

表格是軟件開發中最常用的組件之一，這是一個易于使用的強大數據表，具有高級自定義功能，包括排序、列過濾、分頁、分組等。它在 GitHub 上擁有超過 2k星。

GitHub：github.com/xaksis/vue-…

5. vue-notification

向用戶顯示消息是應用程序的基本功能之一，這個庫將幫助構建漂亮的通知。它提供了許多功能，如動畫、自定義位置、自定義樣式等等。這個庫在 Github 上有超過 2.3K顆星。

GitHub：github.com/euvl/vue-no…

6. tree select

顧名思義，這是一個帶有嵌套選項的多選組件。它包括許多功能，如支持嵌套選項的單選和多選、模糊匹配、異步搜索、延遲加載（僅在需要時加載深層選項的數據）等等。它在 GitHub 上擁有超過 2.6K顆星。

GitHub：github.com/riophae/vue…

7. egjs-infinite grid

如果必須使用網格布局，那么這個庫是一個很好的資源，該庫用于根據網格類型無限排列包括內容的元素。

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();

GitHub：github.com/naver/egjs-…

（學習視頻分享：vuejs入門教程、編程基礎視頻）

以上就是【整理分享】vue項目上可用的7個實用JS庫的詳細內容，更多請關注php中文網其它相關文章！

關鍵詞： vue3