前言

借助開(kāi)源庫(kù)加速 Vue 項(xiàng)目的開(kāi)發(fā)進(jìn)度是現(xiàn)代前端開(kāi)發(fā)比較常見(jiàn)的方式，平常收集一些 JavaScript 庫(kù)介紹，在遇到需要的時(shí)候可以信手拈來(lái)。Vue 生態(tài)有很多不錯(cuò)的依賴庫(kù)或者組件，是使用 Vue 開(kāi)發(fā)前端的原因之一。接下來(lái)將會(huì)介紹七個(gè) Vue 項(xiàng)目中會(huì)用到的 JavaScript 庫(kù)。

一、vueuse

這是 GitHub 上星最多的庫(kù)之一，擁有超過(guò) 12.8k 顆星，這是一組基于組合式 API 的實(shí)用函數(shù)庫(kù)。它的初衷就是將一切原本并不支持響應(yīng)式的 JS API 變得支持響應(yīng)式，省去程序員自己寫(xiě)相關(guān)代碼。

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 };
    },
};

項(xiàng)目地址：https://github.com/vueuse/vueuse

二、vue-js-modal

這是一個(gè)易于使用、高度可定制的 Vue.js 模態(tài)庫(kù)，該庫(kù)支持靜態(tài)和動(dòng)態(tài)兩種類型的模態(tài)，靜態(tài)是通過(guò)模板明確定義的，動(dòng)態(tài)是根據(jù)傳遞給“顯示模態(tài)”函數(shù)的配置生成的。這個(gè)庫(kù)在 Github 上有超過(guò) 4.2k 星。

項(xiàng)目地址：https://github.com/euvl/vue-js-modal

三、vue-wait

這個(gè)庫(kù)可以在沒(méi)有任何沖突的情況下控制頁(yè)面上的各種加載狀態(tài)。它的核心原理是管理一個(gè)具有多個(gè)加載狀態(tài)的數(shù)組（或者一個(gè) Vuex 存儲(chǔ)）。集成加載器組件開(kāi)始監(jiān)聽(tīng)其注冊(cè)的加載器并立即進(jìn)入加載狀態(tài)。這個(gè)庫(kù)在 Github 上有超過(guò) 1.9k 顆星。

項(xiàng)目地址：https://github.com/f/vue-wait

四、good-table

表格是項(xiàng)目開(kāi)發(fā)中最常用的組件之一，這是一個(gè)易于使用的強(qiáng)大數(shù)據(jù)表，具有高級(jí)自定義功能，包括排序、列過(guò)濾、分頁(yè)、分組等。它在 GitHub 上擁有超過(guò) 2k 星。

項(xiàng)目地址：https://github.com/xaksis/vue-good-table

五、vue-notification

向用戶顯示消息是應(yīng)用程序的基本功能之一，這個(gè)庫(kù)將幫助構(gòu)建漂亮的通知。它提供了許多功能，如動(dòng)畫(huà)、自定義位置、自定義樣式等等。這個(gè)庫(kù)在 Github 上有超過(guò) 2.3K 顆星。

項(xiàng)目地址：https://github.com/euvl/vue-notification

六、tree select

這是一個(gè)帶有嵌套選項(xiàng)的多選組件。它包括許多功能，如支持嵌套選項(xiàng)的單選和多選、模糊匹配、異步搜索、延遲加載（僅在需要時(shí)加載深層選項(xiàng)的數(shù)據(jù)）等等。它在 GitHub 上擁有超過(guò) 2.6K 顆星。

項(xiàng)目地址：https://github.com/riophae/vue-treeselect

七、egjs-infinite grid

如果必須使用網(wǎng)格布局，那么這個(gè)庫(kù)是一個(gè)很好的資源，該庫(kù)用于根據(jù)網(wǎng)格類型無(wú)限排列包括內(nèi)容的元素。

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

項(xiàng)目地址：https://github.com/naver/egjs-infinitegrid

到此這篇關(guān)于JavaScript優(yōu)選七個(gè)用于vue開(kāi)發(fā)庫(kù)的文章就介紹到這了,更多相關(guān)JS庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論