20개 이상의 실용적인 Vue 구성 요소 라이브러리를 수집해 보세요!
- 青灯夜游앞으로
- 2022-08-11 20:03:273143검색
이 기사는 개발자가 개발 효율성과 미적 측면을 향상시키는 데 도움이 될 수 있는 20개 이상의 유용한 Vue 구성 요소 라이브러리를 요약하고 공유합니다.
이 기사에서는 몇 가지 일반적인 vue.js 구성 요소를 공유합니다.
테이블/데이터 그리드
Vue Tables-2
주소: https://github.com/matfish2/vue-tables-2
Vue Tables 2는 개발자를 위해 설계되었습니다. Vue를 사용하여 아름답고 기능적인 데이터 테이블을 생성하기 위한 주요 도구 세트입니다. 수백 개의 비즈니스 소프트웨어 애플리케이션이 이를 사용하고 있습니다. 또한 Vue Tables 2는 지속적으로 성장하고 개선되며 새로운 기능을 얻고 있습니다. (학습 영상 공유: vue 영상 튜토리얼)
기능은 다음과 같습니다:
- 선택적 행 및 고정 헤더
- 가상 페이징
- 고객 구성 요소 데이터의 CSV 다운로드
- 데이터 레이어에서 지원되는 다단계 그룹화
- Tailwind 테마
Handsontable
주소: https://github.com/handsontable/handsontable/tree/master/wrappers/vue
Handsontable은 페이지 사이드 테이블 상호 작용 플러그인으로, 테이블 내용을 표시하고 항목 병합, 통계, 행과 열 끌기 등을 지원합니다.
로드된 테이블 페이지 처리 지원: 행/열 추가/삭제, 셀 병합 등
또한 React, Angular 및 Vue에서도 작동합니다. Handsontable은 데이터 그리드 기능과 스프레드시트의 사용자 경험을 결합한 JavaScript 구성 요소입니다. 또한 데이터 바인딩, 데이터 유효성 검사, 필터링, 정렬 및 CRUD 작업을 제공합니다.
기능은 다음과 같습니다:
- 다중 열 정렬
- 비연속 선택
- 데이터 필터링 및 유효성 검사
- 파일 내보내기
- 조건부 서식
- 셀 병합
- 행/열 숨기기
- 컨텍스트 메뉴 및 댓글
Ag Grid 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
주소: https://github.com/Happy-Coding-Clans/vue-easytable
vue-easytable은 제가 만난 가장 강력한 Vue 테이블 구성 요소 중 하나입니다.
테이블 구성 요소에는 셀 줄임표, 고정/유연한 열 크기 조정, 사용자 정의 필터링 등과 같은 많은 기본 제공 기능이 있습니다. 여기에는 여러 가지 기능이 있습니다:
- 국제화
- 테마 사용자 정의
- 내장 테마
- 가상 스크롤
- 열 고정
- 머리글 고정
- 테이블 헤더 그룹화
Vue Good Table
주소: https : //github.com/xaksis/vue-good-table
Vue-Good-Table은 Vue.js 기반의 데이터 테이블 구성 요소로, 정렬, 열 필터링, 페이징 및 기타 기본 기능을 갖춘 간단하고 깔끔합니다. . 여기에는 여러 가지 기능이 있습니다:
- 테이블 검색 및 정렬
- 열 필터링 및 페이징
- 체크박스 테이블
- 행 그룹화
- 행 스타일
- 행 다중 선택
알림
Vue 토스트화
주소: https://github.com/Maronato/vue-toastification
가벼움, 간편함, 아름다운 토스트 팁을 제공합니다. Nuxt 지원이 내장되어 있습니다. 또한 새로운 Composition API와 Vue 3을 지원합니다. 또한 JSX를 사용하여 보다 유연한 기능을 제공하는 사용자 정의 구성 요소를 개발할 수도 있습니다. 또한 범용 등록을 통해 React를 포함한 모든 애플리케이션 내에서 사용할 수 있습니다. 여러 기능이 있습니다:
- 전체가 Typescript로 작성되었으며 모든 유형 지원
- RTL 지원
- 모든 항목 사용자 정의
- 슬라이드하여 닫기
- onClose, onClick 및 onMounted 후크를 사용하여 사용자 정의 환경 만들기
- 프로그래밍 방식으로 Toast 삭제 및 업데이트
Vue Toasted
주소: https://github.com/shakee93/vue-toasted
Vue Toasted는 Vue용 최고의 토스트(프롬프트) 플러그인 중 하나입니다. Vue, Laravel, NuxtJS 등과 같은 많은 조직에서 신뢰를 받고 있습니다. 반응성이 뛰어나고 호환성이 좋으며 사용하기 쉽고 매력적이며 풍부한 기능, 아이콘, 액션 등을 갖추고 있습니다.
Vue 알림
주소: https://github.com/se-panfilov/vue-notifications
Vue 알림은 비차단 라이브러리 독립적 알림 구성 요소입니다.
VueNotiments 앱을 알림 UI 라이브러리와 연결하세요. miniToastr, VueToasted, VueEasyToast, toastr, iziToast, Noty, swal을 지원합니다.
Vue Awesome Notifications
주소: https://f3oall.github.io/awesome-notifications/
Awesome Notifications는 가볍고 완전히 사용자 정의 가능한 JavaScript Vue Awesome 알림입니다. Vue.js 버전입니다. Awesome 알림 라이브러리의
Loader
Vue Wait
주소: https://github.com/f/vue-wait
Vue Wait 이것은 VUE, Vuex 및 Nuxt 애플리케이션을 위한 복잡한 애플리케이션입니다. Loader 및 진행 관리 구성 요소.
Vue Wait는 상태 간 충돌 없이 페이지의 여러 로딩 상태를 관리하는 데 도움이 됩니다. 매우 간단한 아이디어를 기반으로 합니다. 여러 로딩 상태가 있는 배열(또는 Vuex 저장소)을 관리함으로써 내장 로더 구성 요소가 등록된 로더를 수신하고 즉시 로딩 상태에 들어가도록 합니다.
Vue 콘텐츠 로더
주소: https://github.com/egoist/vue-content-loader
Vue 콘텐츠 로더는 Vue.js를 기반으로 하는 SVG 자리 표시자이며 SVG를 사용자 정의할 수 있습니다. Facebook 로딩 카드와 같은 자리 표시자 로딩을 생성하기 위한 구성 요소입니다. Vue 콘텐츠 로더는 반응 콘텐츠 로더의 Vue 구현입니다.
Epic Spinners
주소: https://epic-spinners.epicmax.co/
EpicSpinners는 순수 CSS로 제작된 사용하기 쉬운 웹 로딩 효과 세트이며 Vue도 통합합니다. 편의를 위한 구성요소 Vue 프로젝트에서 사용됩니다. 순수 CSS로 제작되었기 때문에 어떤 웹 프로젝트에도 통합하여 사용할 수 있습니다!
Vue Radial Progress
주소: https://github.com/wyzantinc/vue-radial-progress
Vue Radial Progress 이것은 svg 및 JavaScript를 사용하는 방사형 진행률 표시줄 효과를 위한 로더 구성 요소입니다. 로딩 및 진행 프롬프트로 사용할 수 있는 그라데이션 방사형 진행률 표시줄 효과가 있는 로더를 그립니다.
ICONS
Vue Feather Icons
주소: https://github.com/egoist/vue-feather-icons
Feather는 디자이너와 개발자를 위한 오픈 소스 아이콘 라이브러리 세트입니다. 간단하고 아름다운 오픈 소스 아이콘 라이브러리입니다. 각 아이콘은 24×24 그리드로 디자인되어 단순성, 일관성 및 가독성을 강조합니다. 주요 제조업체에서 생산하는 많은 프런트엔드 프레임워크에는 상업용으로 무료로 사용할 수 있는 아이콘이 내장되어 있습니다. 그 기능은 다음과 같습니다:
- 모든 아이콘은 통일된 표준에 따라 디자인되었으며 완벽한 픽셀 정렬을 가지고 있습니다.
- 디자인 스타일이 일관되어 패치워크 아이콘 라이브러리보다 우수합니다.
- 다양한 개발 시나리오를 지원합니다. 개발자들은 매우 친절합니다.
Vue Awesome
주소: https://github.com/Justineo/vue-awesome
Font Awesome은 실제 개발 과정에서 자주 접하게 되는 인기 아이콘 글꼴 라이브러리 세트입니다. 아이콘이 필요한 시나리오의 경우 디자이너 없이 Font Awesome에서 직접 일반적으로 사용되는 아이콘을 찾아서 사용할 수 있습니다. 개인적으로 Font Awesome의 아이콘은 대부분의 아이콘을 포함하고 있으며 다양한 프레임워크를 지원한다고 생각합니다.
Charts
Vue Apexcharts
주소: https://github.com/apexcharts/vue-apexcharts
Apexcharts는 간단한 API로 구축 가능한 최신 JavaScript 차트 라이브러리입니다. 대화형 차트 그리고 시각화. Vue Apexcharts는 ApexCharts의 Vue.js 구성 요소입니다.
Vue Echarts
주소: https://github.com/ecomfe/vue-echarts
vue-echarts는 echarts 패키지를 기반으로 구현된 컴포넌트 라이브러리입니다. 일반적인 구성요소 참조 방법입니다. 특정 설치 및 인용의 경우 독자는 vue-echarts 기술 문서를 직접 읽을 수 있습니다.
Vue Chartjs
주소: https://github.com/apertureless/vue-chartjs
vue-chartjs는 Chart.js용 Vue 패키지로, 사용자가 Vue에서 Chart.js를 쉽게 사용할 수 있도록 해줍니다. 재사용 가능한 차트 구성 요소를 쉽게 만들 수 있어 가능한 한 빨리 실행하기 위해 간단한 차트가 필요한 사람들에게 적합합니다. vue-chartjs는 기본 논리를 추상화하고 Chart.js 객체도 노출하므로 사용자가 최대한의 유연성을 얻을 수 있습니다.
V-Charts
주소: https://github.com/ElemeFE/v-charts
V-Charts는 Vue2.0 및 Echarts를 기반으로 패키징된 아이콘 컴포넌트로, 한 가지 유형만 필요합니다. 프론트엔드와 백엔드 모두 친화적인 데이터 형식으로 간단한 구성 항목을 설정하여 공통 차트를 생성할 수 있습니다.
Time
Vue Timer Hook
주소: https://github.com/riderx/vue-timer-hook
Vue3 타이머 모듈은 React-timer-hook에서 영감을 받았습니다. 또한 Vue 3 구성 요소에서 타이머, 스톱워치 및 시간 로직/상태를 처리하는 사용자 정의 후크입니다.
Vue 수평 타임라인
주소: https://github.com/guastallaigor/vue-horizontal-timeline
Vue 수평 타임라인은 Vue.js로 만든 간단한 수평 타임라인 구성 요소입니다.
(학습 영상 공유: 웹 프론트엔드 개발, 기본 프로그래밍 영상)
위 내용은 20개 이상의 실용적인 Vue 구성 요소 라이브러리를 수집해 보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!