[Organisation et partage] 7 bibliothèques JS pratiques disponibles sur les projets vue

Utiliser des bibliothèques open source pour accélérer la progression du développement du projet VUE est un moyen courant pour le développement front-end moderne. Je rassemble généralement quelques introductions aux bibliothèques JavaScript afin de pouvoir les avoir à portée de main en cas de besoin. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]

L'écosystème VUE possède de nombreuses bonnes bibliothèques ou composants dépendants, ce qui est l'une des raisons pour lesquelles VUE est utilisé pour développer un front-end.

1. vueuse

C'est l'une des bibliothèques les plus étoilées sur GitHub, avec plus de 12,8k étoiles. Il s'agit d'un groupe basé sur Une bibliothèque de fonctions pratique pour API combinée12.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.

Son intention initiale est de faire en sorte que toutes les API JS qui ne prennent pas en charge à l'origine la réactivité prennent en charge la réactivité, éliminant ainsi le besoin pour les programmeurs d'écrire eux-mêmes les codes pertinents.

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

2. vue-js-modal

C'est un outil facile à utiliser , bibliothèque modale Vue.js personnalisée hautement disponible, qui prend en charge deux types de modalités : statique et dynamique est explicitement définie via des modèles, et dynamique est générée en fonction de la configuration transmise à la fonction « display modal ». Cette bibliothèque compte plus de 4,2k étoiles sur Github.

🎜🎜🎜GitHub :

🎜3. vue-wait🎜🎜🎜Cette bibliothèque peut être trouvé sur Contrôler différents états de chargement sur la page sans aucun conflit. Son principe de base est de gérer un tableau (ou, éventuellement, un magasin Vuex) avec plusieurs états de chargement. Le composant de chargement intégré commence à écouter ses chargeurs enregistrés et entre immédiatement dans l'état de chargement. Cette bibliothèque compte plus de 1,9k étoiles sur Github. 🎜🎜🎜 🎜GitHub : github.com/f/vue-wait🎜🎜

🎜4. good-table🎜🎜🎜Table est le composant le plus couramment utilisé dans les logiciels development One, un tableau de données puissant et facile à utiliser avec des fonctionnalités de personnalisation avancées, notamment le tri, le filtrage des colonnes, la pagination, le regroupement, etc. Il a plus de 2 000 étoiles sur GitHub. 🎜🎜GitHub : github.com/xaksis/vue-…🎜🎜

🎜5. vue-notification🎜🎜🎜Afficher les messages à l'utilisateur est une application Une des fonctionnalités de base du programme, cette bibliothèque permettra de créer de belles notifications. Il fournit de nombreuses fonctionnalités telles que l'animation, la position personnalisée, le style personnalisé, etc. Cette bibliothèque compte plus de 2,3K étoiles sur Github. 🎜🎜🎜 🎜GitHub : github.com/euvl/vue-no…🎜🎜

🎜6. tree select🎜🎜🎜Comme son nom l'indique, il s'agit d'un Un composant à sélection multiple pour les options. Il comprend de nombreuses fonctionnalités telles que la prise en charge de la sélection unique et multiple d'options imbriquées, la correspondance floue, la recherche asynchrone, le chargement différé (chargement de données pour les options approfondies uniquement en cas de besoin), et bien plus encore. Il compte plus de 2,6K étoiles sur GitHub. 🎜🎜GitHub : 🎜github.com/riophae/vue… 🎜🎜🎜🎜 7. egjs-infinite grid 🎜🎜🎜 Si vous devez utiliser la disposition en grille, cette bibliothèque est une excellente ressource pour concevoir des mises en page basées sur la disposition infinie de type grille. éléments, y compris le contenu. 🎜

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

Copier après la connexion

Copier après la connexion

GitHub：github.com/naver/egjs-…

（学习视频分享：vuejs入门教程、编程基础视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!