> 웹 프론트엔드 > View.js > [토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

青灯夜游
풀어 주다: 2022-04-06 14:13:01
앞으로
4207명이 탐색했습니다.

이 기사는 개발자가 개발 효율성과 미적 측면을 향상시키는 데 도움이 될 수 있는 20개 이상의 유용한 Vue 구성 요소 라이브러리를 요약하고 공유합니다.

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

이 기사에서는 가장 일반적인 vue js 구성 요소 중 일부를 살펴보겠습니다. 수집할 수 있습니다.

Table class

Vue Tables-2

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

주소: https://github.com/matfish2/vue-tables-2

Vue Tables 2는 개발자에게 완전한 기능을 갖춘 A 테이블을 제공하는 것을 목표로 합니다. Vue로 아름답고 실용적인 데이터 테이블을 만들기 위한 도구 세트입니다. 수백 개의 비즈니스 소프트웨어 애플리케이션이 이를 사용하고 있습니다. 또한 Vue Tables 2는 지속적으로 성장하고 개선되며 새로운 기능을 추가하고 있습니다.

기능

  • 선택적 행 및 고정 헤더
  • 가상 페이징
  • 고객 구성 요소 데이터의 CSV 다운로드
  • 데이터 레이어 지원을 통한 다단계 그룹화
  • Tailwind 테마

Handsontable

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

주소: https://github.com/handsontable/handsontable/tree/master/wrappers/vue

handsontable은 페이지 측 테이블 대화형 플러그인으로, 테이블 콘텐츠를 로드하고 표시할 수 있으며 병합된 항목, 통계를 지원할 수 있습니다. , 행과 열 드래그 등

동시에 로드된 테이블 페이지 처리(행/열 추가/삭제, 셀 병합 등)를 지원합니다.

또한 React, Angular 및 Vue에서도 작동합니다. Handsontable은 데이터 그리드 기능과 스프레드시트의 사용자 경험을 결합한 JavaScript 구성 요소입니다. 또한 데이터 바인딩, 데이터 유효성 검사, 필터링, 정렬 및 CRUD 작업을 제공합니다.

기능

  • 다중 열 정렬
  • 비연속 선택
  • 데이터 필터링 및 데이터 유효성 검사
  • 파일 내보내기
  • 조건부 서식 지정
  • 셀 병합
  • 행/열 숨기기
  • 컨텍스트 메뉴 및 댓글

Ag Grid Vue

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

주소: https://github.com/ag-grid/ag-grid

Ag-Grid는 Vue.js를 기반으로 하는 데이터 테이블 구성 요소입니다. 그 중 'ag'는 '불가지론자'라는 뜻이다. 내부 ag-Grid 엔진은 종속성이 없는 TypeScript로 구현됩니다.

ag-Grid는 래퍼 구성 요소를 통해 Vue를 지원하므로 다른 Vue 구성 요소와 마찬가지로 응용 프로그램에서 ag-Grid를 사용할 수 있습니다. 속성 바인딩을 통한 구성 전달 및 이벤트 바인딩을 통한 이벤트 처리를 지원합니다. Vue 구성 요소를 사용하여 그리드 UI와 셀 콘텐츠/동작을 사용자 정의할 수도 있습니다.

Vue Easytable

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

주소: https://github.com/huangshuwei/vue-easytable

vue-easytable은 제가 본 것 중 가장 강력한 Vue 테이블 구성 요소 중 하나입니다.

테이블 구성 요소에는 셀 줄임표, 고정/유연한 열 크기 조정, 사용자 정의 필터링 등과 같은 많은 기본 제공 기능이 있습니다. 여기에는 여러 기능이 있습니다:

  • 국제화
  • 테마 사용자 정의
  • 내장 테마
  • 가상 스크롤
  • 열 고정
  • 머리글 고정
  • 머리글 그룹화

Vue Good Table

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

주소: https://github.com/xaksis/vue-good-table

Vue-Good-Table은 Vue.js 기반의 데이터 테이블 컴포넌트로, 간단하고 깔끔하며, 정렬, 컬럼 필터링 등의 기본적인 기능을 더 갖추고 있습니다. , 페이징 등 기능. 여기에는 여러 가지 특징이 있습니다: 索 테이블 검색 및 정렬

    필터링 및 페이징
  • 체크박스 테이블
  • 선 스타일
  • 다중 선택
  • Vue toastification

주소: https://github.com /Maronato/vue-toastification

가벼움, 간편함, 아름다운 토스트 팁을 제공합니다. Nuxt 지원이 내장되어 있습니다. 또한 새로운 Composition API와 Vue 3을 지원합니다. 또한 SX를 사용하여 보다 유연한 기능을 제공하기 위한 맞춤형 구성 요소를 개발할 수도 있습니다. 또한 범용 등록을 통해 React를 포함한 모든 애플리케이션 내에서 사용할 수 있습니다. 여기에는 여러 기능이 있습니다: [토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

Typescript로 완전히 작성되었으며 모든 유형 지원

RTL 지원

    모든 것을 사용자 정의
  • 슬라이드하여 닫기
  • onClose, onClick 및 onMounted 후크를 사용하여 사용자 정의 환경 만들기
  • 프로그래밍 방식으로 Toast 삭제 및 업데이트
  • Vue Toasted
주소: https://github.com/shakee93/vue-toasted

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

Vue Toasted는 Vue를 위한 최고의 토스트 플러그인 중 하나입니다. Vue, Laravel, NuxtJS 등과 같은 많은 조직에서 신뢰를 받고 있습니다. 반응성이 뛰어나고 호환성이 좋으며 사용하기 쉽고 매력적이며 풍부한 기능, 아이콘, 액션 등을 갖추고 있습니다.

Vue 알림

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

주소: https://github.com/se-panfilov/vue-notifications

Vue 알림은 비차단 라이브러리 독립적 알림 구성 요소입니다.

VueNotiments는 앱을 알림 UI 라이브러리와 연결합니다. miniToastr, VueToasted, VueEasyToast, toastr, iziToast, Noty, swal을 지원합니다.

Vue Awesome Notifications

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

주소: https://f3oall.github.io/awesome-notifications/

Awesome 알림은 가볍고 완전히 사용자 정의 가능한 JavaScript Vue Awesome 알림입니다. Vue.js 버전입니다. Awesome 알림 라이브러리의

Vue Wait

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

주소: https://github.com/f/vue-wait

Vue Wait 이것은 VUE, Vuex 및 Nuxt 애플리케이션을 위한 복잡한 로더 및 진행 관리 구성 요소입니다.

Vue Wait는 상태 간 충돌 없이 페이지의 여러 로딩 상태를 관리하는 데 도움이 됩니다. 매우 간단한 아이디어를 기반으로 합니다. 여러 로딩 상태가 있는 배열(또는 Vuex 저장소)을 관리함으로써 내장 로더 구성 요소가 등록된 로더를 수신하고 즉시 로딩 상태에 들어가도록 합니다.

Vue Content Loader

주소: https://github.com/egoist/vue-content-loader

1[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

Vue Content Loader는 SVG 구성 요소를 사용자 정의할 수 있는 Vue.js 기반 SVG 자리 표시자 로드입니다. Facebook 로딩 카드와 같은 자리 표시자 로딩을 생성합니다. Vue 콘텐츠 로더는 반응 콘텐츠 로더의 Vue 구현입니다.

  • 완전히 사용자 정의 가능: 색상, 속도 및 크기 변경 가능

  • 나만의 로드아웃 만들기: 온라인 도구를 사용하여 쉽게 사용자 정의 로드아웃 만들기

  • 지금 사용할 수 있습니다. 미리 만들어진 세트가 이미 많이 있습니다. up

  • Performance

Epic Spinners

1[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

주소: https://epic-spinners.epicmax.co/

EpicSpinners는 사용하기 쉬운 웹 로딩 효과 세트입니다. 순수 CSS이며, Vue 프로젝트에서 쉽게 사용할 수 있는 Vue 구성 요소도 통합합니다. 순수 CSS로 제작되었으므로 모든 웹 프로젝트에서 통합하여 사용할 수 있습니다!

Vue Radial Progress

1[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

주소: https://github.com/wyzant-dev/vue-radial-progress

Vue Radial Progress 이것은 SVG를 사용하는 방사형 진행률 표시줄 효과가 있는 로더 구성 요소입니다. JavaScript는 로딩 및 진행률 프롬프트로 사용할 수 있는 그라데이션 방사형 진행률 표시줄 효과가 있는 로더를 그립니다.

ICONS

Vue Feather Icons

주소: https://github.com/egoist/vue-feather-icons

1[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

Feather는 디자이너와 개발자를 위한 오픈 소스 아이콘 라이브러리 세트입니다. 그리고 아름다운 오픈 소스 아이콘 라이브러리. 각 아이콘은 24×24 그리드로 디자인되어 단순성, 일관성 및 가독성을 강조합니다. 주요 제조업체에서 생산하는 많은 프런트엔드 프레임워크에는 상업용으로 무료로 사용할 수 있는 아이콘이 내장되어 있습니다.

기능

  • 모든 아이콘은 완벽한 픽셀 정렬로 통합 표준에 따라 디자인되었습니다.
  • 패치워크 아이콘 라이브러리를 능가하는 디자인 스타일이 일관됩니다.
  • 개발자를 위한 다양한 개발 시나리오 지원 매우 친절합니다.

Vue Awesome

주소: https://github.com/Justineo/vue-awesome

1[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

Font Awesome은 실제 개발 과정에서 자주 접하게 되는 인기 있는 아이콘 글꼴 라이브러리 세트입니다. 아이콘이 필요한 시나리오의 경우 디자이너 없이 자주 사용되는 아이콘을 Font Awesome에서 직접 찾아서 사용할 수 있습니다. 개인적으로 Font Awesome의 아이콘은 대부분의 아이콘을 포함하고 있으며 다양한 프레임워크를 지원한다고 생각합니다.

Vue Material Design Icons

주소: https://github.com/robcresswell/vue-material-design-icons

SVG Material Design 아이콘 모음을 단일 파일 구성 요소로 제공합니다. 또한 이 라이브러리는 머티리얼 디자인 아이콘을 렌더링하기 위한 Vue 단일 파일 구성 요소 모음입니다. 또한 아이콘 크기를 좀 더 쉽게 조정하는 데 도움이 되는 일부 CSS가 포함되어 있습니다.

Charts

Vue Apexcccharts

주소: https://github.com/apexcharts/vue-apexcharts

1[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

Apexcharts는 최신 JavaScript 차트 라이브러리/간단한 API를 사용한 대화형 빌드입니다. 차트 및 시각화 . Vue Apexcharts는 ApexCharts의 Vue.js 구성 요소입니다.

Vue Echarts

주소: https://github.com/Justineo/vue-echarts

1[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

vue-echarts는 echarts encapsulation을 기반으로 구현된 컴포넌트 라이브러리이며, 일반적인 방식에 따라 직접 설치할 수 있습니다. 구성 요소 참조 방법. 특정 설치 및 인용에 대해서는 독자가 vue-echarts 기술 문서를 직접 읽을 수 있습니다.

Vue Chartjs

주소: https://github.com/apertureless/vue-chartjs

1[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

vue-chartjs는 Chart.js용 Vue 패키지로, 사용자가 Vue .js에서 차트를 쉽게 사용할 수 있도록 해줍니다. 를 사용하면 재사용 가능한 차트 구성 요소를 쉽게 만들 수 있으므로 최대한 빠르게 실행되는 간단한 차트가 필요한 사람들에게 적합합니다. vue-chartjs는 기본 논리를 추상화하고 Chart.js 객체도 노출하므로 사용자가 최대한의 유연성을 얻을 수 있습니다.

V-Charts

주소: https://github.com/ElemeFE/v-charts

1[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

V-Charts는 Vue2.0 및 Echarts를 기반으로 패키징된 아이콘 컴포넌트로, 한 가지 유형만 필요합니다. 프론트 엔드와 백엔드 모두 친화적인 데이터 형식으로 간단한 구성 항목을 설정하여 공통 차트를 생성할 수 있습니다.

Time

Vue 타이머 후크

주소: https://github.com/riderx/vue-timer-hook

[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

Vue3 타이머 모듈은 반응 타이머 후크에서 영감을 받았습니다. 또한 Vue 3 구성 요소에서 타이머, 스톱워치 및 시간 로직/상태를 처리하는 사용자 정의 후크입니다.

Vue 수평 타임라인:

주소: https://github.com/guastallaigor/vue-horizontal-timeline

2[토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!

Vue 수평 타임라인은 Vue.js로 만든 간단한 수평 타임라인 구성 요소입니다.

원본 주소: https://medium.com/js-dojo/20-usefulue-js-comComponents-2022-3bf9fbe5b556

저자: lindelof

(학습 영상 공유: vuejs tutorial, 웹 프론트) -끝)

위 내용은 [토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿