8개의 Vue.js UI 구성요소를 요약하고 공유하세요. 언제든지 하나를 사용할 수 있습니다!

이 글은 여러분을 위한 8가지 Vue.js UI 구성 요소를 요약하고 공유합니다. 와서 수집해 보세요. 어쩌면 사용할 수도 있습니다!

웹 애플리케이션 개발과 관련하여 Vue.js는 개발자가 가장 좋아하는 앱으로 빠르게 자리잡고 있습니다. GitHub에 123,000개가 넘는 별이 있는 이 현대적이고 신선한 JavaScript 라이브러리는 기존 프로젝트에 쉽게 통합할 수 있기 때문에 개발자에게 매력적인 선택입니다. 빠르고, 매우 강력합니다. 이를 사용하여 처음부터 동적이고 확장 가능하며 유지 관리 가능한 단일 페이지 애플리케이션을 구축할 수 있습니다. [관련 권장 사항: vue.js 비디오 튜토리얼]

JavaScript 프레임워크인 Vue.js를 사용하면 동적 데이터를 DOM에 쉽게 렌더링하고, 데이터를 DOM 요소에 바인딩하고, 애플리케이션 상태를 관리/유지할 수 있습니다(로컬 저장소). ) 사용자가 브라우저를 다시 로드할 필요가 없습니다. 가볍고 모듈식이며 최소한의 구성이 필요하기 때문에 선호됩니다. 속도도 매우 빠르고 파일 크기도 작습니다. 개발자는 이를 어떤 프로젝트나 기존 프레임워크에도 쉽게 적용할 수 있습니다.

Vue.js가 점점 더 많은 개발자가 선택하는 프레임워크가 됨에 따라 주목할만한 8가지 UI 구성 요소가 있으며 2022년에 프로젝트에 통합되기를 희망합니다. 각 구성 요소의 끝에는 귀하가 기여할 수 있도록 해당 구성 요소의 GitHub 저장소 계정에 대한 링크를 추가했습니다.

Sweet Modal

모달은 웹 애플리케이션의 사용자 경험에 뭔가 다른 것을 추가할 수 있는 좋은 방법입니다. Sweet Modal은 다양한 훌륭한 모달 선택을 제공하며, 많은 Modal이 귀하의 웹 앱을 독특하게 만들어줍니다. 양식을 통해 데이터를 수집하거나 경고를 전달하는 데 사용할 수 있으며 모든 프로젝트에는 아름다운 모달이 필요합니다. GitHub에 별이 500개 이상 있는 이 프로젝트는 확실히 주목할 만한 프로젝트입니다.

GitHub: https://github.com/adeptoas/sweet-modal-vue

Vue Scrollama

Vue Scrollama는 웹 페이지에서 스크롤 기반 상호 작용을 쉽게 만들 수 있는 구성 요소입니다. , 이를 통해 사용자에게 스토리와 같은 경험을 제공합니다. 이 구성 요소를 사용하면 시각적인 내용이 그대로 드러납니다. 또한 사용자 정의가 매우 가능하며 놀라운 웹 애플리케이션을 만들 수 있습니다.

GitHub: https://github.com/shenoy/vue-scrollama

Vue-parallax

Parallax는 웹 애플리케이션에 생동감과 독창성을 더할 수 있는 좋은 방법입니다. Vue-parallax는 다음을 허용합니다. Vue 프로젝트에서 시차를 쉽게 구현할 수 있으며 완전히 사용자 정의할 수 있습니다. 이 구성 요소는 GitHub에서 300개가 넘는 별을 보유하고 있으며 정기적인 유지 관리와 성장하는 새로운 커뮤니티를 갖추고 있습니다.

GitHub: https://github.com/apertureless/vue-parallax

Vue-typer

타자기 효과에는 뭔가 특별한 것이 있습니다. 가장 좋은 UI 구성 요소처럼 사용자를 끌어들이는 것은 바로 그것입니다. 사용자의 참여를 유도하고 더 나은 경험을 창출합니다. 이 구성 요소는 매우 사용자 정의가 가능하며 웹 애플리케이션을 완벽하게 만들기 위해 글꼴 유형, 크기, 입력 속도 및 기타 여러 가지를 변경할 수 있는 많은 옵션이 있다는 것을 잊지 마십시오.

GitHub: https://github.com/cngu/vue-typer

Vue-slider

사진은 사용자의 관심을 끌고 슬라이더는 사진을 선보일 수 있는 좋은 방법입니다. Vue-slider는 웹 앱을 돋보이게 만드는 매우 현대적인 반응형 "Netflix" 스타일 슬라이더를 제공합니다.

GitHub: https://github.com/fanyeh/vue-slider

Vue.js Popover

팝업 및 툴팁 - 중요하지만 과소평가된 UI 구성 요소입니다. 이는 사용자에게 제공하려는 주요 콘텐츠를 방해하지 않으면서 사용자에게 정보를 표시할 수 있는 좋은 방법입니다. Vue.js 팝오버를 사용하면 웹 애플리케이션의 다양한 요소에 창의적이고 애니메이션이 적용된 도구 설명과 팝오버를 추가할 수 있습니다.

GitHub: https://github.com/euvl/vue-js-popover

Vue-bar

데이터에 관해서는 프레젠테이션이 중요합니다. Vue-bar를 사용하면 웹 애플리케이션에서 데이터를 표현하기 위해 사용자 정의 가능하고 현대적이며 우아하고 매력적인 막대를 만드는 것이 더 쉬워졌습니다.

GitHub: https://github.com/DeviaVir/vue-bar

Vue Infinite Slide Bar

아주 틈새 UI 구성 요소인 Infinite Slide Bar를 사용하면 완전히 새로운 방식으로 작업할 수 있습니다. 일반적으로 지루한 정보를 사용자에게 표시합니다.

GitHub: https://github.com/biigpongsatorn/vue-infinite-slide-bar

일부 UI 구성 요소는 목록에 없지만 확실히 주목할 가치가 있습니다.

• Vue 다크 모드(https://www.vuedarkmode.com/)

다양한 UI 구성 요소로 구성된 이 그룹/컬렉션은 Vue 프로젝트에 어두운 테마, 아이콘 및 요소 색상을 추가하는 데 적합합니다. 웹 앱에 다크 모드를 추가하거나 단순히 디자인을 혼합하는 데 적합합니다.

바로 지금 프로젝트에 구현할 수 있는 8가지 놀라운 Vue.js UI 구성 요소입니다. 당신은 무엇을 기다리고 있습니까?

---

원문 영문 텍스트: https://blog.bitsrc.io/8-vue-js-ui-comComponent-for-2019-5bfff4df480e

저자: Krissanawat Kaewsanmuang

(영상 공유 학습: 웹 프론트) -끝 )

위 내용은 8개의 Vue.js UI 구성요소를 요약하고 공유하세요. 언제든지 하나를 사용할 수 있습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!