QUASAR VS. VUTIFY VS. BOOTSTRAP VUE: 올바른 VUE.JS UI 라이브러리 선택

Vue 프로젝트에 가장 적합한 UI 라이브러리를 결정하기 위한 통찰력

지난 몇 년 동안 Vue.js는 확고하게 발전하여 Angular 및 React와 경쟁할 수 있는 강력한 경쟁자가 되었습니다. Vue의 성장을 살펴보면 프레임워크의 단순성, 라이브러리, 구성 요소 및 생태계 강화를 위한 학습 자료의 가용성과 관련이 있습니다. 게다가 Vue에는 선택할 수 있는 UI 구성 요소 라이브러리도 함께 제공됩니다.

이 기사에서는 Vue용으로 빌드된 3가지 뛰어난 UI 구성 요소 라이브러리에 중점을 둘 것입니다.

1. 퀘이사

게시물용 이미지

원천: https://quasar.dev/

목록의 첫 번째는 Vue용으로 개발된 오픈 소스 UI 라이브러리/프레임워크인 Quasar입니다. 반응형 단일 페이지 응용 프로그램, 점진적 웹 응용 프로그램 및 서버 측 렌더링 응용 프로그램을 빠르게 개발할 수 있습니다. 그 외에도 모바일 및 데스크톱 애플리케이션에서 Quasar를 사용할 수 있습니다.

Quasar는 강력한 CLI 및 UI 구성 요소를 제공하면서 모든 웹, 모바일 및 데스크톱 솔루션을 위한 단일 코드 기반을 강조합니다.

Quasar는 코딩 모범 사례를 따르는 프레임워크로도 알려져 있습니다. 사실 Quasar에는 기본적으로 몇 가지 모범 사례가 내장되어 있으며 이를 위해 추가 구성을 수행할 필요가 없습니다. 이러한 모범 사례 중 일부는 다음과 같습니다.

HTML/CSS/JS 축소.
캐시 무효화.
흔들리는 나무.
소스 매핑.
지연 로딩으로 코드 분할.
코드 린트.

Quasar에 대한 통계를 살펴보면 16000개 이상의 별과 350명 이상의 기여자가 있습니다. 이러한 통계는 최근 빠르게 증가하고 있는 것으로 보이며 Jounce, Qrstore, Whiteboard-it, Biting Bit 및 Decision6과 같은 회사가 Quasar와 함께 여정을 시작했습니다.

장점

고성능 및 응답성을 갖춘 웹 구성 요소.
통합 모범 사례.
대규모 커뮤니티 및 문서.
Material 2.0 디자인을 따릅니다.
RTL 지원.
높은 보안.
기존 프로젝트를 쉽게 마이그레이션할 수 있습니다.

단점

Quasar는 (적어도 대부분의 경우) 한 사람이 개발한 프레임워크로 알려져 있어 향후 유지 관리 문제를 일으킬 수 있습니다.

2. 뷰티파이

게시물용 이미지

원천: https://vuetifyjs.com/en/

Vuetify는 Vue.js를 기반으로 하는 또 다른 UI 프레임워크이며 개발자가 풍부한 사용자 경험으로 솔루션을 구축할 수 있도록 재사용 가능하고 깨끗한 구성 요소 집합을 제공합니다. Vuetify는 Quasar와 마찬가지로 거의 모든 웹 브라우저를 지원하며 웹 개발, 프로그레시브 웹 앱, 모바일 개발(Cordova) 및 데스크톱 앱 개발(Electron)을 위한 템플릿도 제공합니다.

Vuetify는 머티리얼 디자인의 표준을 따릅니다.

그러나 일부 사람들에게는 이러한 기준이 다소 엄격하게 느껴질 수 있습니다. 게다가, 머티리얼 디자인을 연습하면 사용자에게 스타일의 재사용성 및 표준화와 같은 몇 가지 이점이 있습니다. 그 외에도 Vuetify는 동적 레이아웃 응용 프로그램을 사용자 정의하고 SASS 변수 구성 요소를 사용자 정의합니다.

GitHub 통계를 고려하면 Vuetify의 저장소에는 550명 이상의 기여자와 함께 27900개 이상의 별이 있으며 이는 Vuetify가 Quasar보다 약간 앞서 있습니다. Taigbot, qfl-stack, FinTech Consortium, Bitting bit는 Vuetify를 UI 프레임워크로 사용하는 선도적인 회사입니다.

장점

재사용 가능한 구성 요소.
그래픽 문제가 있는 개발자를 위한 아름다움을 가능하게 합니다.
다양한 구성 요소.
브라우저 호환성.
머티리얼 디자인.
대규모 커뮤니티와 좋은 문서.
지속적인 업데이트.

단점

머티리얼 디자인을 별로 좋아하지 않는다면 Vuetify가 최선의 선택이 아닐 수도 있습니다.
커스터마이징은 좀 더 까다롭습니다.

3. 부트스트랩 뷰

게시물용 이미지

원천: https://bootstrap-vue.org/

부트스트랩은 웹사이트와 웹 애플리케이션에서 사용되는 가장 유명한 프론트엔드 프레임워크라고 할 수 있습니다. BootstrapVue는 Vue JS용으로 개발된 부트스트랩의 사용자 정의 버전입니다. BootstrapVue에는 85개 이상의 구성 요소, 45개 이상의 사용 가능한 플러그인, 지시문, 테마 및 1100개 이상의 아이콘이 포함되어 있습니다. 또한 BootstrapVue에는 bootstrap 4 구성 요소 및 그리드 시스템의 자세한 구현이 포함되어 있습니다.

Bootstrap 제품군에 속해 있기 때문에 BootstrapVue는 일반 부트스트랩 요소를 Vue 구성 요소로 사용할 수 있습니다.

Bootstrap에 익숙하다면 학습 곡선이 상대적으로 짧고 사용에 앞서 시작하게 될 것입니다.

Ophigo, Channext Platform, Keymentics는 BootstrapVue를 사용하는 주요 회사로 인정받을 수 있으며 GitHub 저장소에는 12000개 이상의 별이 있으며 이름 아래 거의 300명의 기여자가 있습니다.

장점

모바일 우선 반응형 레이아웃.
빠르고 쉬운 스타일링.
특정 구성 요소, 그룹, 구성 요소 및 지시문만 가져올 수 있습니다.
자동화 WAI-ARIA 접근성 마크업.
Bootstrap에서 얻은 최신 기능.
창조하다 테마 SCSS 변수와 전역 옵션 .
대규모 커뮤니티 및 문서.

단점

커스터마이징은 좀 더 까다롭습니다.

#vuetify #자바스크립트 #quasar #vuejs #부트스트랩

블로그.bitsrc.io