오픈 소스 라이브러리를 사용하여 VUE 프로젝트의 개발 진행을 가속화하는 것은 현대 프런트엔드 개발의 일반적인 방법입니다. 저는 일반적으로 필요할 때 쉽게 사용할 수 있도록 JavaScript 라이브러리에 대한 몇 가지 소개를 수집합니다. [관련 권장사항: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발]
VUE 생태계에는 좋은 종속 라이브러리나 구성요소가 많이 있으며, 이는 VUE를 사용하여 프론트엔드를 개발하는 이유 중 하나입니다.
이는 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…
这是一个易于使用、高度可定制的 Vue.js 模态库,该库支持静态和动态两种类型的模态,静态是通过模板明确定义的,动态是根据传递给“显示模态”函数的配置生成的。这个库在 Github 上有超过 4.2k
星。
GitHub:github.com/euvl/vue-js…
这个库可以在没有任何冲突的情况下控制页面上的各种加载状态。它的核心原理是管理一个具有多个加载状态的数组(或者,可选地,一个 Vuex 存储)。集成加载器组件开始监听其注册的加载器并立即进入加载状态。这个库在 Github 上有超过 1.9k
颗星。
GitHub:github.com/f/vue-wait
表格是软件开发中最常用的组件之一,这是一个易于使用的强大数据表,具有高级自定义功能,包括排序、列过滤、分页、分组等。它在 GitHub 上拥有超过 2k
星。
GitHub:github.com/xaksis/vue-…
向用户显示消息是应用程序的基本功能之一,这个库将帮助构建漂亮的通知。它提供了许多功能,如动画、自定义位置、自定义样式等等。这个库在 Github 上有超过 2.3K
颗星。
GitHub:github.com/euvl/vue-no…
顾名思义,这是一个带有嵌套选项的多选组件。它包括许多功能,如支持嵌套选项的单选和多选、模糊匹配、异步搜索、延迟加载(仅在需要时加载深层选项的数据)等等。它在 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();
이것은 사용하기 쉬운 , 고가용성 정적 및 동적이라는 두 가지 유형의 양식을 지원하는 맞춤형 Vue.js 모달 라이브러리입니다. 정적은 템플릿을 통해 명시적으로 정의되고 동적은 "디스플레이 모달" 기능에 전달된 구성을 기반으로 생성됩니다. 이 라이브러리는 Github에서 4.2k
개 이상의 별을 받았습니다.
1.9k
개 이상의 별을 받았습니다. 🎜🎜🎜 🎜GitHub: github.com/f/vue-wait🎜🎜2,000
개 이상의 별을 받았습니다. 🎜🎜GitHub: github.com/xaksis/vue-…🎜🎜2.3K
개 이상의 별을 받았습니다. 🎜🎜🎜 🎜GitHub: github.com/euvl/vue-no…🎜🎜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-…
위 내용은 [구성 및 공유] Vue 프로젝트에서 사용할 수 있는 실용적인 JS 라이브러리 7개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!