[整理と共有] vue プロジェクトで利用できる 7 つの実用的な JS ライブラリ

オープン ソース ライブラリを使用して VUE プロジェクトの開発の進行を加速することは、現代のフロントエンド開発では一般的な方法です。私は、簡単に入手できるように、JavaScript ライブラリの入門書をいくつか集めています。必要なときに。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

VUE エコロジーには優れた依存ライブラリやコンポーネントが多数あり、これが使用する理由の 1 つです。 VUE を使用してフロントエンドを開発します。

1. vueuse

これは、GitHub で最もスターの付いているライブラリの 1 つであり、12.8k 以上のスターを獲得しています。これはグループ ベースです。 on Combined 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 モーダル ライブラリで、静的と動的という 2 種類のモーダルをサポートします。静的はテンプレートを通じて明示的に定義され、動的は「show modal」関数に渡された構成に基づいて生成されます。 。このライブラリには、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

テーブルは、ソフトウェア開発で最も一般的に使用されるコンポーネントの 1 つで、並べ替え、列フィルタリング、ページング、グループ化などの高度なカスタマイズ機能を備えた、使いやすく強力なデータ テーブルです。 GitHub では

2,000 を超えるスターが付いています。

GitHub:

github.com/xaksis/vue-…

5.vue-notification

ユーザーへのメッセージの表示このライブラリはアプリケーションの基本機能の 1 つであり、美しい通知を作成するのに役立ちます。アニメーション、カスタム位置、カスタム スタイルなどの多くの機能を提供します。このライブラリには、Github 上で

2.3K を超えるスターが付いています。

#GitHub：

github.com/euvl/vue-no…

6.ツリー選択

名前が示すように、これはネストされたオプションを持つ複数選択コンポーネントです。これには、ネストされたオプションの単一および複数選択のサポート、あいまい一致、非同期検索、遅延読み込み (必要な場合にのみ深いオプションのデータを読み込む) など、多くの機能が含まれています。 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 中国語 Web サイトの他の関連記事を参照してください。