[구성 및 공유] Vue 프로젝트에서 사용할 수 있는 실용적인 JS 라이브러리 7개

오픈 소스 라이브러리를 사용하여 VUE 프로젝트의 개발 진행을 가속화하는 것은 현대 프런트엔드 개발의 일반적인 방법입니다. 저는 일반적으로 필요할 때 쉽게 사용할 수 있도록 JavaScript 라이브러리에 대한 몇 가지 소개를 수집합니다. [관련 권장사항: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발]

VUE 생태계에는 좋은 종속 라이브러리나 구성요소가 많이 있으며, 이는 VUE를 사용하여 프론트엔드를 개발하는 이유 중 하나입니다.

1.vueuse

이는 12.8k개 이상의 별을 보유한 GitHub에서 가장 많은 별표를 받은 라이브러리 중 하나입니다. 결합된 API를 위한 실용적인 함수 라이브러리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.

원래 의도는 원래 응답성을 지원하지 않는 모든 JS API가 응답성을 지원하도록 만들어 프로그래머가 관련 코드를 직접 작성할 필요가 없도록 하는 것입니다.

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

이것은 사용하기 쉬운 , 고가용성 정적 및 동적이라는 두 가지 유형의 양식을 지원하는 맞춤형 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🎜🎜🎜테이블은 소프트웨어에서 가장 일반적으로 사용되는 구성 요소입니다. development One은 정렬, 열 필터링, 페이징, 그룹화 등을 포함한 고급 사용자 정의 기능을 갖춘 강력하고 사용하기 쉬운 데이터 테이블입니다. GitHub에서 2,000개 이상의 별을 받았습니다. 🎜🎜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 그리드 🎜🎜🎜 그리드 레이아웃을 사용해야 한다면 이 라이브러리는 그리드 기반 레이아웃을 디자인하는 데 훌륭한 리소스입니다. 콘텐츠를 포함한 요소. 🎜

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 프로젝트에서 사용할 수 있는 실용적인 JS 라이브러리 7개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!