六虎

分享7 个VUE项目用得上的JavaScript库

分享7 个VUE项目用得上的JavaScript库

作者：

三分梦

在

凭借开源库加速VUE项目的开发进度是现代前端开发比较常见的方式，平常收集一些JavaScript库介绍，在遇到需求的时分能够信手拈来。

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 星。

共享7 个VUE项目用得上的JavaScript库

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 颗星。

共享7 个VUE项目用得上的JavaScript库

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

6. tree select

望文生义，这是一个带有嵌套选项的多选组件。它包括许多功用，如支撑嵌套选项的单选和多选、含糊匹配、异步搜索、延迟加载（仅在需求时加载深层选项的数据）等等。它在 GitHub 上具有超越 2.6K 颗星。

GitHub：github.com/riophae/vue…

7. egjs-infinite grid

假如必须使用网格布局，那么这个库是一个很好的资源，该库用于依据网格类型无限摆放包括内容的元素。

共享7 个VUE项目用得上的JavaScript库

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-…

本文正在参与「金石计划 . 瓜分6万现金大奖」”

更多文章