공유할 수 있는 17개의 Vue3 실용적인 UI 컴포넌트 라이브러리(웹 + 모바일)

Vue3가 공식 출시된 지 거의 2년이 지났습니다. 올해 2월 공식적으로 Vue 프로젝트의 기본 버전이 되었습니다. 모든 주요 구성 요소 라이브러리와 프레임워크가 Vue 3를 지원하고 최적화했습니다. 이 기사에서는 17가지를 공유하겠습니다. 웹 UI 라이브러리, 모바일 UI 라이브러리를 포함한 Vue3 실용적인 UI 컴포넌트 라이브러리가 모두에게 도움이 되기를 바랍니다!

1. 웹 UI 라이브러리

1. ElementUI Plus

개발자, 디자이너 및 제품 관리자를 위한 Vue 3.0 기반 데스크톱 구성 요소 라이브러리 세트입니다. (학습 영상 공유: vuejs 튜토리얼)

공식 주소: https://element-plus.org/zh-CN/

2. Ant Design of Vue

Ant Design of Vue 엔터프라이즈급 백엔드 제품 구현, 개발 및 제공

공식 주소: https://www.antdv.com/docs/vue/introduce-cn

Ant Design Vue는 Ant Design을 사용하는 매우 성숙한 프레임워크입니다. Vue의 사용자 인터페이스는 쉽고 구성 요소를 다양한 아이콘 스타일, 글꼴 및 어두운 테마에 맞게 조정할 수 있습니다. Ant Design Vue는 60개 이상의 구성 요소를 지속적으로 개선하여 기본적으로 대부분의 프로젝트 요구 사항을 충족하고 더 좋고 쉽게 액세스할 수 있도록 만들고 있습니다.

Vue3의 Ant Design 패키지는 더 작고 가벼우며 SSR(컴포지션 API도 포함)을 지원합니다. Ant Design에는 데이터 테이블, 통계 상자, 팝업 확인, 모달 및 팝업 창과 같은 성숙하고 복잡한 구성 요소가 있습니다.

3. BalmUI

는 Google의 Material Design을 기반으로 하며 Vue 플러그인 및 지침, 간단한 것부터 복잡한 것까지 고도로 사용자 정의 가능한 구성 요소가 함께 제공됩니다

공식 주소: https://next-material.balmjs .com /

BalmUI는 Balm.js(Vue CLI와 유사한 프런트엔드 워크플로 도구) 팀이 만든 프런트엔드 UI 구성 요소 라이브러리로 최신 Vue 3을 기반으로 구축되었습니다. 강력한 사용자 정의 및 디자인으로 즉시 사용할 수 있습니다. 스타일은 Google의 머티리얼 디자인 디자인 사양을 완전히 따르며 뛰어난 대화형 경험을 갖춘 UI 구성 요소 라이브러리입니다.

특징:

• 엔터프라이즈 수준의 중간 및 백엔드 제품의 인터랙티브 효과와 시각적 스타일에서 추출되어 아름답고 우아하며 뛰어난 디테일 경험

• 즉시 사용 가능합니다. 이는 고품질 Vue 구성 요소일 뿐만 아니라 내장 아이콘 라이브러리 호출을 위한 다수의 패키지 플러그인/명령어/공용 도구 라이브러리도 포함하고 있습니다. 최신 Material Icons 아이콘 라이브러리를 통합하세요

• 모든 구성 요소와 플러그인은 고도로 사용자 정의 가능하며 독립적으로 사용할 수 있습니다

4. Vue 3.0/TypeScript를 기반으로 하는 Naive UI

Tucson Vue3 구성 요소 라이브러리 무료 오픈 소스 프런트 엔드 UI 구성 요소 라이브러리, 완전한 문서, 대규모 공장이 아닌 KPI 프로젝트! 공식 주소: https://www.naiveui.com/zh-CN/os-theme

Naive UI는 비교적 새로운 Vue 3.0/TypeScript 기술 스택을 기반으로 개발된 프런트 엔드 UI 구성 요소 라이브러리입니다. 저자는 TuSimple 출신입니다. 처음에는 2년 동안 내부적으로 유지 관리되었으며 이제는 Github 커뮤니티에서 오픈 소스로 제공됩니다.

기능:

구성 요소가 풍부하고 완벽하며, 일반적으로 사용되는 70개 이상의 비즈니스 구성 요소, 주문형 소개 지원

• 공식 테마 편집기가 제공되므로 번거로운 sass, CSS 변수가 필요하지 않습니다. 웹팩 로더도 아니고 TypeScript로 구축된 고급 유형 안전 테마 시스템입니다

• 빠르게 실행되고, 작고 가벼우며, 모든 구성 요소를 트리셰이크할 수 있으며 [1] 필요가 없습니다. 구성 요소가 제대로 작동하도록 CSS를 가져옵니다

5. Arco.design

ByteDance 엔터프라이즈 수준 제품 디자인 시스템은 React 및 Vue 이중 버전을 지원합니다공식 주소: https://arco. design/

ArcoDesign은 ByteDance를 기반으로 합니다. 회사 내부의 Byte Design이 업그레이드되었습니다. 약 3년간의 다듬질 끝에 Nuggets가 주최한 "Rare Earth Developer Conference 2021"에서 대규모 내부 리소스를 통해 오픈 소스화되었습니다. 비즈니스 침전 및 검증 이는 단순한 UI 컴포넌트 라이브러리가 아닌 포괄적인 기업 수준의 제품 디자인 시스템입니다.

ArcoDesign은 주로 중간 및 백엔드 애플리케이션 구축 시 품질과 효율성을 향상시키기 위해 제품 설계와 개발을 원활하게 연결하는 문제를 해결합니다. 현재 ArcoDesign은 주로 ByteDance의 미드 및 백엔드 제품의 경험 디자인과 기술 구현을 제공하며 주로 UED 디자인 및 개발 학생들이 구축하고 유지 관리합니다.

하이라이트:

• 제품 디자인, UI 디자인 및 개발 후 작업을 포괄하는 체계적이고 포괄적인 디자인 사양과 리소스를 제공합니다.

• React 및 Vue 동기화 지원. 두 가지 UI 구성 요소 라이브러리 세트인 React와 Vue도 제공됩니다. Vue 구성 요소 라이브러리는 Vue 3.0을 기반으로 개발되었습니다.

• 한 번의 클릭으로 다크 모드 켜기와 원활한 전환을 지원합니다.

• Arco Pro 모범 사례를 제공하고 일반적인 페이지 시나리오를 구성하여 사용자가 프로젝트를 빠르게 초기화하고 페이지 템플릿을 사용할 수 있도록 돕습니다. . 0부터 1까지 중간 및 백엔드 애플리케이션 구축 문서

공식 주소: https: //quasar.dev/

Quasar는 Vue 사용자 인터페이스(SPA, PWA, SSR, 모바일 및 데스크톱)를 구축하는 데 도움이 되는 완전한 성능 중심 프레임워크입니다. , Node 및 Webpack, Quasar 또한 별도로 학습하지 않고도 데스크톱 및 모바일 경험을 구축하는 데 도움이 되는 Cordova, Capacitor 및 Electron도 포함되어 있습니다.

7. Vue3용 iDUX UI 컴포넌트 라이브러리

Tencent 비즈니스 팀이 비즈니스 서비스를 제공하는 과정에서 개발한 엔터프라이즈급 디자인 시스템

공식 주소: https://tdesign.tencent.com/

개발 문서: https://tdesign.tencent.com/vue-next /overview

9. PrimeVue

사용하기 쉬운 다기능 고성능 Vue UI 구성 요소 library

공식 주소: https://www.primefaces.org/primevue/Vue 3의 무료 오픈 소스를 기반으로 고도로 사용자 정의 가능한 프론트엔드 UI 컴포넌트 라이브러리는 해외의 뛰어난 프론트엔드 UI 컴포넌트 라이브러리입니다. 매우 독특하고 공부하고 배우고 시작할 가치가 있습니다.

PrimeVue는 Vue 3 웹 UI 구성 요소 라이브러리를 지원하는 매우 우수한 Vue UI 구성 요소 라이브러리 세트입니다. 풍부한 구성 요소, 강력한 사용자 정의, 명확한 공식 웹 사이트 문서, 충분한 코드 예제가 있으며 중국어도 매우 뛰어납니다. good.은 매우 유용한 Vue 구성 요소 라이브러리입니다.

10. DevUI

Vue3 및 DevUI를 기반으로 설계된 Huawei의 UI 구성요소

공식 주소: https://vue-devui.github.io/

11.

Vue 3의 무료 오픈 소스 UI 라이브러리는 UI가 매우 아름답고 사용 가능한 백엔드 관리 인터페이스가 있습니다.

공식 주소: https://vuestic.dev/

Vuestic UI는 Epicmax 팀에서 개발한 Vue.js 기반의 웹 개발 구성 요소 라이브러리 세트입니다. 최근 Vue3 버전이 업데이트되어 출시되었으면 좋겠습니다. Vue.js는 활용도가 높고 포괄적인 오픈 소스 도구를 구축하는 최선의 방법에 대한 전문 지식입니다. Vuestic UI는 출시 직후 Vue로 구축된 가장 인기 있는 구성 요소 라이브러리 중 하나가 되었습니다.

Vuestic UI 팀 Epicmax는 세계 최고의 Vue.js 개발 팀 중 하나입니다. 반응형 디자인을 통해 이러한 구성 요소를 웹 PC 프로젝트에 사용할 수 있을 뿐만 아니라 거의 모든 화면 크기 해상도에 적합합니다. 키보드 사용성(Keyboard Usability)은 프레임워크 전반에 걸쳐 원활한 키보드 지원을 제공하는 Vuestic 기능입니다.

기술적 특징:

Vue3과 호환 가능, 내장된 52개의 아름다운 반응형 구성 요소, 풍부한 기능

인기 구성 요소 라이브러리에서는 보기 드문 키보드 탐색, 부드러운 경험 지원

글로벌 지원 구성 파일 및 CSS 변수를 통한 구성 요소 구성

내장된 2가지 색상 테마 구성표 세트

패키징 볼륨을 줄이기 위한 트리 쉐이킹 최적화 지원

i18n 국제화 지원

• IE 이외의 언어와 호환 가능 browsers

• 12. Headless UI

• Tailwind CSS와 완벽하게 통합되도록 설계된 스타일이 전혀 없고 완전히 액세스 가능한 UI 구성 요소입니다.
• 공식 주소: https://headlessui.com/

• 13. View UI Plus

  Vue.js 3을 기반으로 한 엔터프라이즈급 UI 구성 요소 라이브러리 및 프런트 엔드 솔루션

  공식 주소: https://www.iviewui.com/

  

  View UI Plus View Design 디자인 시스템 중 Vue.js 3을 기반으로 한 UI 컴포넌트 라이브러리 세트로 주로 기업 수준의 Middle, Back-End 시스템에 사용됩니다.

  2. 모바일 UI 라이브러리

  14.               Vant

  Vant는 2017년에 오픈 소스로 공개된 가볍고 안정적인 모바일 구성 요소 라이브러리입니다.

  공식 주소: https://vant-contrib.gitee.io/vant/#/zh-CN/

  

  Features

  • 뛰어난 성능, 평균 구성 요소 크기는 1KB(최소) 미만입니다. +gzip )

  • 주요 모바일 시나리오를 포괄하는 70개 이상의 고품질 구성 요소

  • 외부 종속성 없음, 타사 npm 패키지 없음

  • TypeScript로 작성, 완전한 유형 정의 제공

  • 단위 테스트 적용 범위 90%를 초과하여 안정성 보장

  • 풍부한 중국어 및 영어 문서와 구성 요소 예제 제공

  • Sketch 및 Axure 디자인 리소스 제공

  • Vue 2, Vue 3 및 WeChat 애플릿 지원

  • 테마 사용자 정의 지원, 700개 이상의 테마 변수 내장

  • 주문형 소개 및 Tree Shaking 지원

  • 접근성 지원(지속적인 개선 중)

  • 다크 모드 지원(Vant 4부터 지원)

  • 서버 측 렌더링 지원

  • 국제화 지원, 20개 이상의 언어 패키지 내장

  15 ​​NutUI

  NutUI는 An이 개발하고 제공하는 JD 스타일 Vue 모바일 구성 요소 라이브러리입니다. 모바일 웹 인터페이스를 갖춘 엔터프라이즈급 제품입니다.

  공식 주소: https://nutui.jd.com/#/

  

  NutUI 3.0 새 버전 기능

  • 70개 이상의 고품질 구성 요소(이전 버전보다 20개 이상)

  • JD APP 9.0 시각적 사양 기반(이전 버전은 JD APP 7.0 기반)

  • 주문형 인용도 지원

  • 더 자세한 문서 및 예제

  • TypeScript 지원

  • 지원 서버 측 렌더링(SEO 요구 사항에 적합) )

  • 맞춤형 테마 지원

  • 단위 테스트 범위

  16.Varlet

  머티리얼 스타일 모바일 구성 요소 라이브러리, 문서가 매우 완벽합니다. You Yuxi가 추천하며 주목할 가치가 있습니다.

  공식 주소: https://varlet.gitee.io/varlet-ui/#/zh-CN/home

  

  Varlet 기술 기능:

  • 50개의 고품질 경량 공통 구성 요소 제공

  • 중국인이 개발했으며 완전한 중국어/영어 문서를 제공합니다

  • 주문형 소개 및 테마 사용자 정의 지원, 다크 모드 지원

  • 국제화 지원

  • 웹스톰, vscode 편집기 지원 구성 요소 속성 강조 표시

  • SSR 서버 측 렌더링 지원

  • Typescript 지원

  • 90% 이상의 단위 테스트 적용 범위 보장

  17 JD NutUI 기반 NutUI + Vue 기반 복권 구성 요소 라이브러리. 3은 마케팅 활동과 미니 게임 시나리오를 위한 복권 게임 플레이를 신속하게 개발하는 데 사용되는 프런트엔드 팀에서 제작되었습니다.

  공식 주소: https://nutui.jd.com/bingo/#/

  복권 구성 요소의 기술적 특성

  총 12개의 복권 구성 요소가 포함되어 있습니다

  • UI 디자인 JD.com APP 10.0 시각적 사양

  • 공식 웹사이트에서는 자세한 문서와 충분한 코드 예제를 제공합니다

  • Vue 3.0 기반, TypeScript도 지원, 주문형 소개 지원

  • 편리하고 유연한 사용자 정의 설정
  12가지 유형의 일반 복권 구성 요소
  TurnTable 큰 바퀴 복권

  • Marquee Marquee 복권

  • SquareNine 9각형 격자 복권

  • ScratchC ard 스크래치 카드 복권

  • GiftBox 신비한 선물 상자 Lottoroll Lottery Machine

  • Hiteggs 황금 에그 Smashing

  • 기관 빨간 패키지 레드 패킷 Rainskake Shake

  • dollmachine Doll Machine

• ShakeDice

• GuessGift 당신이 숨으면 추측할 수 있습니다

(동영상 공유 학습: 웹 프론트엔드 개발, 프로그래밍 입문)

위 내용은 공유할 수 있는 17개의 Vue3 실용적인 UI 컴포넌트 라이브러리(웹 + 모바일)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!