[Organisation und Freigabe] 7 praktische JS-Bibliotheken, die in Vue-Projekten verfügbar sind

Die Verwendung von Open-Source-Bibliotheken zur Beschleunigung des Entwicklungsfortschritts des VUE-Projekts ist eine gängige Methode für die moderne Front-End-Entwicklung. Normalerweise sammle ich einige Einführungen in JavaScript-Bibliotheken, damit ich sie bei Bedarf immer zur Hand habe. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]

Das VUE-Ökosystem verfügt über viele gute abhängige Bibliotheken oder Komponenten, was einer der Gründe für die Verwendung von VUE zur Front-End-Entwicklung ist.

1. vueuse

Dies ist eine der am häufigsten mit Sternen ausgezeichneten Bibliotheken auf GitHub, mit mehr als 12.8k Sternen. Dies ist eine Gruppe, die auf Eine praktische Funktionsbibliothek für kombinierte API12.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.

Die ursprüngliche Absicht besteht darin, alle JS-APIs, die ursprünglich keine Reaktionsfähigkeit unterstützen, dazu zu bringen, Reaktionsfähigkeit zu unterstützen, sodass Programmierer nicht mehr relevante Codes selbst schreiben müssen.

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/vueuse/vueu…

2. vue-js-modal

Dies ist einfach zu verwenden , hochverfügbare, angepasste Modalbibliothek von Vue.js, die zwei Arten von Modalitäten unterstützt: Statisch und dynamisch wird explizit durch Vorlagen definiert, und dynamisch wird basierend auf der an die Funktion „Anzeigemodalität“ übergebenen Konfiguration generiert. Diese Bibliothek hat über 4,2.000 Sterne auf Github.

🎜🎜🎜GitHub: github.com/euvl/vue-js…🎜🎜

🎜3. vue-wait🎜🎜🎜Diese Bibliothek kann sein gefunden unter Kontrollieren Sie verschiedene Ladezustände auf der Seite ohne Konflikte. Sein Kernprinzip besteht darin, ein Array (oder optional einen Vuex-Speicher) mit mehreren Ladezuständen zu verwalten. Die integrierte Loader-Komponente beginnt, auf ihre registrierten Loader zu warten und wechselt sofort in den Ladezustand. Diese Bibliothek hat über 1,9.000 Sterne auf Github. 🎜🎜🎜 🎜GitHub: github.com/f/vue-wait🎜🎜

🎜4. good-table🎜🎜🎜Table ist die am häufigsten verwendete Komponente in Software development One, eine leistungsstarke und benutzerfreundliche Datentabelle mit erweiterten Anpassungsfunktionen wie Sortierung, Spaltenfilterung, Paginierung, Gruppierung und mehr. Es hat über 2k Sterne auf GitHub. 🎜🎜GitHub: github.com/xaksis/vue-…🎜🎜

🎜5. vue-notification🎜🎜🎜Anzeige von Nachrichten an den Benutzer ist Eine Anwendung, eine der Grundfunktionen des Programms. Diese Bibliothek hilft beim Erstellen schöner Benachrichtigungen. Es bietet viele Funktionen wie Animation, benutzerdefinierte Position, benutzerdefinierter Stil und mehr. Diese Bibliothek hat über 2,3K Sterne auf Github. 🎜🎜🎜 🎜GitHub: github.com/euvl/vue-no…🎜🎜

🎜6. Tree Select🎜🎜🎜Wie der Name schon sagt, handelt es sich hierbei um eine verschachtelte Struktur Eine Mehrfachauswahlkomponente für Optionen. Es umfasst viele Funktionen wie die Unterstützung der Einzel- und Mehrfachauswahl verschachtelter Optionen, Fuzzy-Matching, asynchrone Suche, verzögertes Laden (Laden von Daten für tiefe Optionen nur bei Bedarf) und mehr. Es hat über 2,6K Sterne auf GitHub. 🎜🎜GitHub: 🎜github.com/riophae/vue… 🎜🎜🎜🎜 7. egjs-infinite Grid 🎜🎜🎜 Wenn Sie ein Rasterlayout verwenden müssen, ist diese Bibliothek eine großartige Ressource zum Entwerfen von Layouts basierend auf der unendlichen Anordnung des Rastertyps Elemente einschließlich Inhalt. 🎜

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入门教程、编程基础视频）

Das obige ist der detaillierte Inhalt von[Organisation und Freigabe] 7 praktische JS-Bibliotheken, die in Vue-Projekten verfügbar sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!