상위 10개 Vue UI 구성 요소 라이브러리 및 프레임워크

2021년에 고려할 Top-Vue-UI-Component-Libraries-and-Frameworks

Vue JS는 단일 페이지 애플리케이션(SPA) 및 사용자 인터페이스를 개발하는 데 사용되는 진보적인 JavaScript 프레임워크입니다. 그리고 이는 가장 널리 사용되는 프런트엔드 프레임워크 중 하나입니다.

Vue의 흥미로운 기능 중 하나는 웹페이지를 여러 구성요소로 분해하는 기능입니다. 그리고 이 프로세스는 UI 구성 요소 라이브러리를 사용하면 더욱 간단해집니다.

쉽고 빠르게 구성 요소를 만드는 데 도움이 되는 다양한 UI 구성 요소 라이브러리가 있습니다. 따라서 이 블로그에서는 10년 상위 2021개 Vue UI 구성 요소 라이브러리를 검토하겠습니다.

1. 프라임뷰

PrimeVue는 멋진 사용자 인터페이스를 구축하는 데 도움이 되는 사용하기 쉽고 다재다능하며 성능이 뛰어난 Vue UI 구성 요소 라이브러리입니다.

WCAG(웹 콘텐츠 접근성 지침) 및 반응형 디자인을 완벽하게 지원하는 80개 이상의 UI 구성 요소가 있습니다. 최근 업데이트 덕분에 이제 라이브러리는 Vue 3을 완벽하게 지원합니다. 또한 더 많은 구성 요소도 제공됩니다.

Primevue의 가장 좋은 점 중 하나는 광범위한 구성 요소입니다. 테이블과 페이지네이터부터 대화형 Vue 앱을 만드는 데 사용할 수 있는 잘 만들어진 그래프 기반 조직도까지 다양합니다. 오픈 소스이며 Github에서 1개 이상의 별을 보유하고 있으며 NPM에서 매주 6,983회 다운로드됩니다.

2. 뷰티파이

Vuetify는 머티리얼 디자인 사양을 사용하여 아름답게 손수 제작된 구성 요소가 포함된 Vue UI 라이브러리입니다. 이는 모든 구성 요소가 모듈식, 반응성 및 성능을 갖도록 세심하게 제작된 머티리얼 디자인 사양에 따라 정확하게 개발되었음을 의미합니다.

Vuetify를 사용하면 독특하고 동적인 레이아웃으로 애플리케이션을 사용자 정의하고 SASS 변수를 사용하여 구성 요소 스타일을 완벽하게 만들 수 있습니다.

또한 접근성 지침과 모든 최신 브라우저를 지원하며 Vue CLI-3과 호환됩니다. 통합이 쉽고 캐러셀, 탐색, 카드 등 재사용 가능한 UI 구성 요소가 많이 있습니다. Vuetify는 오픈 소스이며 Github에서 29개 이상의 별을 보유하고 있으며 NPM에서 매주 319,170건의 다운로드를 기록하고 있습니다.

3. 차크라 UI 뷰

Chakra UI는 Vue 애플리케이션을 빠르고 쉽게 구축할 수 있는 도구를 제공하는 간단한 모듈식 및 액세스 가능한 구성 요소 라이브러리입니다.

모든 구성요소는 액세스 가능하고(WAI-ARIA 표준을 엄격히 준수함), 테마 지정 및 구성이 가능합니다. 기본적으로 반응형 스타일을 지원하며 다크 모드와 호환됩니다.

Chakra UI에는 소품을 전달하여 구성 요소의 스타일을 쉽게 지정할 수 있는 CBox 및 CStack과 같은 레이아웃 구성 요소 세트도 포함되어 있습니다. 또한 웹팩 플러그인 솔루션을 사용하여 Chakra UI Vue 구성 요소를 자동으로 가져올 수 있습니다. 오픈 소스이며 Github에서 900개 이상의 별을 보유하고 있으며 NPM에서 매주 331회 다운로드됩니다.

4. 부트스트랩 뷰

BootstrapVue, BootstrapVue를 사용하면 Vue.js 및 인기 있는 프런트 엔드 CSS 라이브러리인 Bootstrap을 사용하여 웹에서 반응형, 모바일 우선 및 ARIA 액세스 가능 프로젝트를 구축할 수 있습니다. 문서는 이해하기 쉽고 설정도 쉽습니다. 프런트엔드 구현을 더 빠르게 수행할 수 있습니다.

85개 이상의 구성 요소, 45개 이상의 사용 가능한 플러그인, 여러 지시문 및 1000개 이상의 아이콘을 제공합니다. 또한 레이아웃과 반응형 디자인에 맞춰진 기능적 구성요소를 제공합니다. Nuxt.js 모듈을 사용하여 BootstrapVue를 Nuxt.js 프로젝트에 쉽게 통합할 수도 있습니다.

또한 부트스트랩 CSS 프레임워크가 사용되는 것과 동일한 방식으로 사용됩니다. 약 12.9개의 별과 1.7개의 포크가 포함된 Github의 오픈 소스입니다.

5. 뷰삭스

Vuesax는 독특하고 유쾌한 스타일로 프로젝트를 쉽게 만들기 위해 Vuejs로 만든 새로운 UI 구성 요소 프레임워크입니다. vuesax는 처음부터 만들어졌으며 시각적 접근 방식을 쉽게 만들고 싶어하는 프런트엔드 애호가부터 백엔드까지 모든 유형의 개발자를 위해 설계되었습니다. 최종 사용자. 디자인은 각 구성 요소마다 고유하며 시각적 트렌드나 디자인 규칙에 얽매이지 않으므로 이를 사용하여 구축된 프로젝트도 독특합니다.

반응형 페이지와 재사용 가능하고 사용자 정의 가능한 UI 구성 요소를 제공합니다. npm이나 CDN을 사용하여 시작하는 것도 쉽습니다. 현재 최신 버전에서는 Vue CLI 3을 지원하지 않습니다. Github에서 오픈 소스로 제공되며 약 4.9개의 별과 6700개의 주간 다운로드 NPM을 제공합니다.

6. 개미 디자인 뷰

Ant Design 사양을 기반으로 하는 Ant Design vue인 Ant design vue는 풍부한 대화형 사용자 인터페이스를 구축하기 위한 고품질 구성 요소 및 데모 세트가 포함된 vue UI 라이브러리입니다.

Ant-design-vue는 스켈레톤, 서랍, 통계 등과 같은 웹 애플리케이션을 풍부하게 하는 많은 UI 구성요소를 제공합니다.

최근 출시된 Ant Design Vue 버전 2를 통해 더 빠르고 쉽게 통합하고 번들 크기를 줄일 수 있도록 업데이트되었으며 새로운 Composition API 문서인 Vue 3도 지원합니다. 또한 최신 웹 브라우저, 서버 측 렌더링 및 전자를 지원합니다. Github에는 13개 이상의 별이 있고 NPM의 주간 다운로드 수는 39,693개입니다.

7. 퀘이사

Quasar는 개발자가 즉시 모범 사례를 통해 Quasar CLI를 통해 모든 플랫폼에 하나의 소스 코드 기반을 사용할 수 있도록 하는 최고의 Vue UI 프레임워크 중 하나입니다. 이를 통해 개발자는 주변의 다른 모든 보일러 도금 요소(빌드 시스템, 레이아웃)보다는 앱 콘텐츠에 집중할 수 있습니다. Material 2.0 지침을 따르는 데 중점을 두고 있으며 매우 지원적인 커뮤니티도 있습니다.

Quasar의 특별한 점 중 하나는 코드를 한 번 작성하고 동시에 단 하나의 코드베이스를 사용하여 웹사이트, 모바일 앱으로 배포할 수 있다는 것입니다. 현재 vue 3 기능을 지원하는 새로운 베타 버전도 있습니다. Github에는 약 17.8k개의 별이 있습니다.

8. 부피

Buefy는 Bulma(CSS 프레임워크)를 기반으로 하는 Vue JS용 경량 UI 구성 요소 라이브러리입니다. Buefy는 Bulma와 Vue를 결합하여 최소한의 코드를 사용하여 멋진 애플리케이션을 구축할 수 있도록 도와줍니다. Bulma 인터페이스를 위한 자바스크립트 레이어입니다.

전체를 가져올 수도 있고 일반 웹페이지에서 단일 구성 요소를 가져올 수도 있습니다. 이를 프로젝트에 통합하는 것은 매우 쉽습니다. npm 또는 CDN을 사용하여 수행할 수 있습니다.

Buefy는 기성 UI 구성 요소, 레이아웃 및 아이콘을 제공합니다. 구성 요소는 테마에 SASS를 사용할 수 있습니다. 최신 브라우저도 지원합니다.

9. Vue 자료

Vue Material은 Material Design 사양을 구현하는 널리 사용되는 경량 프레임워크입니다. Vue.js와 Material Design 사양 간의 최고의 통합 중 하나입니다! 간편한 API를 통해 모든 요구 사항에 맞게 쉽게 구성할 수 있습니다.

반응형 디자인과 호환되며 모든 최신 웹 브라우저를 지원합니다. 라이브러리는 테마, 구성요소, UI 요소로 구분됩니다. 테마는 애플리케이션 테마를 지정하는 방법(또는 자신만의 테마를 작성하는 방법)에 대한 확실한 가이드를 제공하며 구성 요소 및 UI 요소는 레이아웃, 탐색, 타이포그래피, 아이콘 및 30개 이상의 구성 요소로 구성됩니다. Github에는 약 9.2개의 별과 1.1개의 포크가 있고 21개 이상의 주간 다운로드 NPM이 있습니다.

10. 킨UI

KeenUI는 Google의 Material Design에서 영감을 받은 간단한 API를 갖춘 경량 vue.js UI 라이브러리입니다. Keen UI는 CSS 프레임워크가 아닙니다. 따라서 그리드 시스템, 타이포그래피 등에 대한 스타일은 포함되지 않습니다. 대신 Javascript가 필요한 대화형 구성 요소에 중점을 둡니다.

약 30개의 재사용 가능한 구성 요소가 있습니다. SASS 변수를 사용하여 스타일을 재정의하여 구성 요소를 사용자 정의할 수 있습니다. CDN 또는 npm을 사용하여 프로젝트에 통합할 수 있습니다. 오픈 소스이며 Github에 약 4개의 별이 있습니다.

결론

UI 구성 요소 라이브러리를 사용하면 확실히 프로젝트 구축이 훨씬 쉬워집니다. 올바른 것을 선택하는 것은 작업하려는 프로젝트의 기능에 따라 다릅니다. 새 프로젝트를 시작하기 전에 해당 목적에 가장 적합한 UI 구성 요소 라이브러리를 검토하는 것이 좋습니다.