이 기사는 개발자가 개발 효율성과 미적 측면을 향상시키는 데 도움이 될 수 있는 20개 이상의 유용한 Vue 구성 요소 라이브러리를 요약하고 공유합니다.
이 기사에서는 가장 일반적인 vue js 구성 요소 중 일부를 살펴보겠습니다. 수집할 수 있습니다.
주소: https://github.com/matfish2/vue-tables-2
Vue Tables 2는 개발자에게 완전한 기능을 갖춘 A 테이블을 제공하는 것을 목표로 합니다. Vue로 아름답고 실용적인 데이터 테이블을 만들기 위한 도구 세트입니다. 수백 개의 비즈니스 소프트웨어 애플리케이션이 이를 사용하고 있습니다. 또한 Vue Tables 2는 지속적으로 성장하고 개선되며 새로운 기능을 추가하고 있습니다.
기능
주소: https://github.com/handsontable/handsontable/tree/master/wrappers/vue
handsontable은 페이지 측 테이블 대화형 플러그인으로, 테이블 콘텐츠를 로드하고 표시할 수 있으며 병합된 항목, 통계를 지원할 수 있습니다. , 행과 열 드래그 등
동시에 로드된 테이블 페이지 처리(행/열 추가/삭제, 셀 병합 등)를 지원합니다.
또한 React, Angular 및 Vue에서도 작동합니다. Handsontable은 데이터 그리드 기능과 스프레드시트의 사용자 경험을 결합한 JavaScript 구성 요소입니다. 또한 데이터 바인딩, 데이터 유효성 검사, 필터링, 정렬 및 CRUD 작업을 제공합니다.
기능
주소: https://github.com/ag-grid/ag-grid
Ag-Grid는 Vue.js를 기반으로 하는 데이터 테이블 구성 요소입니다. 그 중 'ag'는 '불가지론자'라는 뜻이다. 내부 ag-Grid 엔진은 종속성이 없는 TypeScript로 구현됩니다.
ag-Grid는 래퍼 구성 요소를 통해 Vue를 지원하므로 다른 Vue 구성 요소와 마찬가지로 응용 프로그램에서 ag-Grid를 사용할 수 있습니다. 속성 바인딩을 통한 구성 전달 및 이벤트 바인딩을 통한 이벤트 처리를 지원합니다. Vue 구성 요소를 사용하여 그리드 UI와 셀 콘텐츠/동작을 사용자 정의할 수도 있습니다.
주소: https://github.com/huangshuwei/vue-easytable
vue-easytable은 제가 본 것 중 가장 강력한 Vue 테이블 구성 요소 중 하나입니다.
테이블 구성 요소에는 셀 줄임표, 고정/유연한 열 크기 조정, 사용자 정의 필터링 등과 같은 많은 기본 제공 기능이 있습니다. 여기에는 여러 기능이 있습니다:
주소: https://github.com/xaksis/vue-good-table
Vue-Good-Table은 Vue.js 기반의 데이터 테이블 컴포넌트로, 간단하고 깔끔하며, 정렬, 컬럼 필터링 등의 기본적인 기능을 더 갖추고 있습니다. , 페이징 등 기능. 여기에는 여러 가지 특징이 있습니다: 索 테이블 검색 및 정렬
가벼움, 간편함, 아름다운 토스트 팁을 제공합니다. Nuxt 지원이 내장되어 있습니다. 또한 새로운 Composition API와 Vue 3을 지원합니다. 또한 SX를 사용하여 보다 유연한 기능을 제공하기 위한 맞춤형 구성 요소를 개발할 수도 있습니다. 또한 범용 등록을 통해 React를 포함한 모든 애플리케이션 내에서 사용할 수 있습니다. 여기에는 여러 기능이 있습니다:
Typescript로 완전히 작성되었으며 모든 유형 지원
RTL 지원
Vue Toasted는 Vue를 위한 최고의 토스트 플러그인 중 하나입니다. Vue, Laravel, NuxtJS 등과 같은 많은 조직에서 신뢰를 받고 있습니다. 반응성이 뛰어나고 호환성이 좋으며 사용하기 쉽고 매력적이며 풍부한 기능, 아이콘, 액션 등을 갖추고 있습니다.
주소: https://github.com/se-panfilov/vue-notifications
Vue 알림은 비차단 라이브러리 독립적 알림 구성 요소입니다.
VueNotiments는 앱을 알림 UI 라이브러리와 연결합니다. miniToastr, VueToasted, VueEasyToast, toastr, iziToast, Noty, swal을 지원합니다.
주소: https://f3oall.github.io/awesome-notifications/
Awesome 알림은 가볍고 완전히 사용자 정의 가능한 JavaScript Vue Awesome 알림입니다. Vue.js 버전입니다. Awesome 알림 라이브러리의
주소: https://github.com/f/vue-wait
Vue Wait 이것은 VUE, Vuex 및 Nuxt 애플리케이션을 위한 복잡한 로더 및 진행 관리 구성 요소입니다.
Vue Wait는 상태 간 충돌 없이 페이지의 여러 로딩 상태를 관리하는 데 도움이 됩니다. 매우 간단한 아이디어를 기반으로 합니다. 여러 로딩 상태가 있는 배열(또는 Vuex 저장소)을 관리함으로써 내장 로더 구성 요소가 등록된 로더를 수신하고 즉시 로딩 상태에 들어가도록 합니다.
주소: https://github.com/egoist/vue-content-loader
Vue Content Loader는 SVG 구성 요소를 사용자 정의할 수 있는 Vue.js 기반 SVG 자리 표시자 로드입니다. Facebook 로딩 카드와 같은 자리 표시자 로딩을 생성합니다. Vue 콘텐츠 로더는 반응 콘텐츠 로더의 Vue 구현입니다.
완전히 사용자 정의 가능: 색상, 속도 및 크기 변경 가능
나만의 로드아웃 만들기: 온라인 도구를 사용하여 쉽게 사용자 정의 로드아웃 만들기
지금 사용할 수 있습니다. 미리 만들어진 세트가 이미 많이 있습니다. up
Performance
주소: https://epic-spinners.epicmax.co/
EpicSpinners는 사용하기 쉬운 웹 로딩 효과 세트입니다. 순수 CSS이며, Vue 프로젝트에서 쉽게 사용할 수 있는 Vue 구성 요소도 통합합니다. 순수 CSS로 제작되었으므로 모든 웹 프로젝트에서 통합하여 사용할 수 있습니다!
주소: https://github.com/wyzant-dev/vue-radial-progress
Vue Radial Progress 이것은 SVG를 사용하는 방사형 진행률 표시줄 효과가 있는 로더 구성 요소입니다. JavaScript는 로딩 및 진행률 프롬프트로 사용할 수 있는 그라데이션 방사형 진행률 표시줄 효과가 있는 로더를 그립니다.
주소: https://github.com/egoist/vue-feather-icons
Feather는 디자이너와 개발자를 위한 오픈 소스 아이콘 라이브러리 세트입니다. 그리고 아름다운 오픈 소스 아이콘 라이브러리. 각 아이콘은 24×24 그리드로 디자인되어 단순성, 일관성 및 가독성을 강조합니다. 주요 제조업체에서 생산하는 많은 프런트엔드 프레임워크에는 상업용으로 무료로 사용할 수 있는 아이콘이 내장되어 있습니다.
주소: https://github.com/Justineo/vue-awesome
Font Awesome은 실제 개발 과정에서 자주 접하게 되는 인기 있는 아이콘 글꼴 라이브러리 세트입니다. 아이콘이 필요한 시나리오의 경우 디자이너 없이 자주 사용되는 아이콘을 Font Awesome에서 직접 찾아서 사용할 수 있습니다. 개인적으로 Font Awesome의 아이콘은 대부분의 아이콘을 포함하고 있으며 다양한 프레임워크를 지원한다고 생각합니다.
주소: https://github.com/robcresswell/vue-material-design-icons
SVG Material Design 아이콘 모음을 단일 파일 구성 요소로 제공합니다. 또한 이 라이브러리는 머티리얼 디자인 아이콘을 렌더링하기 위한 Vue 단일 파일 구성 요소 모음입니다. 또한 아이콘 크기를 좀 더 쉽게 조정하는 데 도움이 되는 일부 CSS가 포함되어 있습니다.
주소: https://github.com/apexcharts/vue-apexcharts
Apexcharts는 최신 JavaScript 차트 라이브러리/간단한 API를 사용한 대화형 빌드입니다. 차트 및 시각화 . Vue Apexcharts는 ApexCharts의 Vue.js 구성 요소입니다.
주소: https://github.com/Justineo/vue-echarts
vue-echarts는 echarts encapsulation을 기반으로 구현된 컴포넌트 라이브러리이며, 일반적인 방식에 따라 직접 설치할 수 있습니다. 구성 요소 참조 방법. 특정 설치 및 인용에 대해서는 독자가 vue-echarts 기술 문서를 직접 읽을 수 있습니다.
주소: https://github.com/apertureless/vue-chartjs
vue-chartjs는 Chart.js용 Vue 패키지로, 사용자가 Vue .js에서 차트를 쉽게 사용할 수 있도록 해줍니다. 를 사용하면 재사용 가능한 차트 구성 요소를 쉽게 만들 수 있으므로 최대한 빠르게 실행되는 간단한 차트가 필요한 사람들에게 적합합니다. vue-chartjs는 기본 논리를 추상화하고 Chart.js 객체도 노출하므로 사용자가 최대한의 유연성을 얻을 수 있습니다.
주소: https://github.com/ElemeFE/v-charts
V-Charts는 Vue2.0 및 Echarts를 기반으로 패키징된 아이콘 컴포넌트로, 한 가지 유형만 필요합니다. 프론트 엔드와 백엔드 모두 친화적인 데이터 형식으로 간단한 구성 항목을 설정하여 공통 차트를 생성할 수 있습니다.
주소: https://github.com/riderx/vue-timer-hook
Vue3 타이머 모듈은 반응 타이머 후크에서 영감을 받았습니다. 또한 Vue 3 구성 요소에서 타이머, 스톱워치 및 시간 로직/상태를 처리하는 사용자 정의 후크입니다.
주소: https://github.com/guastallaigor/vue-horizontal-timeline
Vue 수평 타임라인은 Vue.js로 만든 간단한 수평 타임라인 구성 요소입니다.
원본 주소: https://medium.com/js-dojo/20-usefulue-js-comComponents-2022-3bf9fbe5b556
저자: lindelof
(학습 영상 공유: vuejs tutorial, 웹 프론트) -끝)
위 내용은 [토혈 요약] 20개 이상의 유용한 Vue 구성 요소 라이브러리를 수집해 보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!