[토혈 정리] 40개 이상의 Vue3 실용적인 도구 공유

Vue3가 공식 출시된 지 약 2년이 지났고, 올해 2월 공식적으로 Vue 프로젝트의 기본 버전이 되었습니다. 다음 글은 여러분과 공유할 40가지 Vue3 실용적인 도구, UI 라이브러리, 플러그인, 생태학을 요약하여 모든 사람에게 도움이 되기를 바랍니다.

1. Vue3 UI 컴포넌트 라이브러리

UI 컴포넌트 라이브러리는 재사용된 인터페이스 디자인 요소의 모음으로 이해될 수 있습니다. UI 컴포넌트 라이브러리는 전체 시스템에서 행동적 역할을 하며, 팀 내 디자이너와 개발자 간의 수평적 협업이며, 일관된 제품 출력을 보장하는 규범적 기반입니다. (학습 동영상 공유: vue 동영상 튜토리얼)

여기서는 13개의 웹 UI 라이브러리와 4개의 모바일 UI 라이브러리를 포함하여 17개의 Vue3 UI 구성 요소 라이브러리를 컴파일했습니다. "17 Vue3 실용적인 UI 구성 요소 라이브러리(웹 + 모바일) 공유》받으세요.

웹 UI 라이브러리

• ElementUI Plus: 디자이너와 개발자를 위한 구성 요소 라이브러리

• Ant Design of Vue: Ant Design의 Vue는 엔터프라이즈급 백엔드 제품을 구현, 개발 및 제공합니다

• BalmUI: UI Google의 Material Design을 기반으로 설계된 구성 요소 라이브러리

• Naive UI: Vue 3.0/TypeScript

• arco.design 기반의 무료 오픈 소스 프런트 엔드 UI 구성 요소 라이브러리: Bytedance 엔터프라이즈 수준 제품 디자인 시스템, React 및 Vue 지원 듀얼 버전

• Quasar: 성능 중심의 완벽한 프레임워크

• . . .

모바일 UI 라이브러리

• Vant: 모바일 컴포넌트 라이브러리

• NutUI: Jingdong 스타일의 경량 모바일 Vue 컴포넌트 라이브러리

• Varlet: 머티리얼 스타일 모바일 컴포넌트 라이브러리

• nut UI 빙고: NutUI를 기반으로 한 Jingdong의 복권 컴포넌트 라이브러리

2, Vue3 실용적인 개발 도구

이전 기사 "7 수집(공유)할 가치가 있는 Vue3 실용적인 개발 도구"에서 실용적인 Vue3 개발 도구 7가지를 소개했습니다. inunplugin-vue components : 온 디맨드 구성 요소의 플러그인을 자동으로 가져옵니다. @vueuse/gesture: 애플리케이션을 대화형으로 만드는 제스처 라이브러리

• unplugin-auto-import

• pinia-plugin-persistedstate: Pinia 데이터 지속성 저장소

• vue-termui.dev: 다음을 기반으로 하는 터미널 UI 프레임워크 Vue.js

3, Vue3 시각화 도구
기술이 자주 업데이트되면서 시각적 개발 도구는 개발 효율성을 향상시키는 효과적인 도구가 되었습니다. 이전 기사 "
• [결론] 4 Vue3 시각화 도구

  "에서는 4개의 Vue3 시각화 도구를 소개했습니다.

• Pdfvuer: Vue 애플리케이션용 PDF 뷰어

vue3- marquee: 원활한 스크롤 구성 요소 Vue-ECharts: Baidu ECharts의 Vue.js 구성 요소

iconpark: 기술을 통해 벡터 아이콘 스타일을 구동하는 오픈 소스 아이콘 라이브러리

4. Vue3에서는 일반적으로 사용되는 플러그인
전에서 기사 "
• 개발 효율성 향상을 위해 일반적으로 사용되는 10가지 Vue3 플러그인(와서 수집)

  ", 효율성 향상에 도움이 되는 10가지 Vue 플러그인에 대해 알아봤습니다:

• vue-multiselect-next : Universal Selection/Multi-select/ Vue

용 마크 구성요소 vue-print-nb: 명령 래퍼vue-i18n-next: Vue3

vue-cropper: vue 이미지 자르기 플러그인

• 용 국제 플러그인 Vue 그리드 레이아웃: Vue의 그리드 레이아웃 시스템

• Vue Qrcode Reader: QR(QR 코드) 코드 감지 및 디코딩을 위한 Vue.js 구성 요소 세트

• Makeit Captcha: 슬라이드 블록 확인 코드 플러그인

• vue3-clipboard: Vue3을 기반으로 한 붙여넣기 및 복사 플러그인

• vue.draggable Sortable.js를 기반으로 한 Vue 3 드래그 앤 드롭 구성 요소

• BetterScroll은 다양한 모바일 문제를 해결합니다(PC는 이미 지원됨) Plug- 스크롤 장면에 필요한 ins

5, Vue3 관련 생태
이전 글 "
• 6 Practical Vue3 관련 생태(요약 공유)

  "에서 6개의 Vue3 관련 생태에 대해 알아보았습니다.

• Vue 플러그인 라이브러리(vue365.cn)

Pinia: 경량 상태 관리 라이브러리Nuxt Modules

Nuxt 3: 서버 측 렌더링(SSR) 애플리케이션을 만드는 데 사용할 수 있습니다

• vuepress: Vue 기반 정적 웹사이트 생성기

• VueUse: 기본 Vue 구성 유틸리티 함수 모음

6, Vue3 애니메이션 플러그인

1) vue-starport

애니메이션을 사용한 교차 라우팅 공유 구성 요소

github 주소 : https://github.com/antfu/vue-starport/blob/main/README.zh-Hans.md

데모 주소: https://vue-starport.netlify.app/

2 )@ vueuse/motion

Vue Composables는 구성요소를 움직입니다

공식 주소: https://motion.vueuse.org/

github 주소: https://github.com/vueuse/motion

7. 오디오 및 비디오 구성 요소

@vueuse/sound

사운드 효과 재생을 위한 Vue 조합

공식 주소: https://sound.vueuse.org/

github 주소: https:// github.com/VueUse/sound

【추천 관련 동영상 튜토리얼: vuejs 입문 튜토리얼, 웹 프론트엔드 시작하기】