10개 이상의 인기 Vue.js 도구 및 라이브러리(공유)

Vue는 계속해서 인기를 얻고 있으며 많은 개발자가 빠르게 채택하고 있으며 Vue.js 도구는 널리 사용 가능합니다. 이는 비합리적이지 않습니다. Vue의 얕은 학습 곡선, 명확한 기능 중심 구조 및 우수한 문서 덕분에 초보자도 쉽게 시작할 수 있으며 숙련된 개발자는 React 또는 Angular와 같은 다른 프레임워크에서 전환할 수 있습니다.

Vue 개발을 진지하게 받아들이면 조만간 눈에 띄는 몇 가지 필수 도구와 라이브러리를 만나게 될 것입니다. 이를 사용하면 Vue 개발자로서의 경력을 발전시키고 전문가처럼 느껴질 수 있습니다.

저는 여러분이 알아야 하고 Vue.js 프로젝트에서 사용해야 할 가장 유명한 도구와 라이브러리 목록을 정리했습니다. UI 구성 요소 라이브러리만 나열하는 다른 많은 기사와 달리 이 편집에서는 Vue 생태계의 도구, 라이브러리 및 플러그인의 광범위한 조합을 탐색합니다.

GitHub의 인기나 스타가 아닌 유용성, 효율성, 독창성을 기준으로 선택했습니다.

Vue CLI

요즘 모든 JavaScript 애플리케이션 프레임워크에는 일종의 CLI 도구가 필수인 것 같습니다. Vue도 예외는 아닙니다. Vue CLI는 신속한 Vue 개발을 위한 모든 기능을 갖춘 도구 세트입니다. 일반적인 프로젝트 스캐폴딩 외에도 즉각적인 프로토타이핑 기능을 사용하여 완전한 프로젝트를 만들지 않고도 새로운 아이디어를 시험해 볼 수 있습니다.

기본적으로 Vue CLI는 Babel, TypeScript, ESLint, PostCSS, PWA, Jest, Mocha, Cypress 및 Nightwatch와 같은 주요 웹 개발 도구 및 기술을 지원합니다. 이는 확장 가능한 플러그인 시스템 덕분입니다. 이는 커뮤니티가 일반적인 요구에 맞게 재사용 가능한 플러그인을 구축하고 공유할 수 있음을 의미합니다.

하지만 금상첨화는 강력한 GUI(Vue UI, CLI와 함께 제공)로, 이를 통해 쉽게 프로젝트를 생성한 다음 팝업 없이 구성 및 관리할 수 있습니다.

확인하려면 여기를 클릭하세요. Vue CLI

VuePress

Vue 생태계의 다음 주요 플레이어는 Vue에서 제공하는 정적 사이트 생성기인 VuePress입니다. 원래 기술 문서 작성을 위한 도구로 제작되었지만 이제는 작고 컴팩트하며 강력한 헤드리스 CMS입니다. 버전 1.x부터 뛰어난 블로그 기능과 강력한 플러그인 시스템을 제공합니다. 기술 문서에 따라 기본 테마와 함께 제공되지만 사용자 정의 테마를 구축하거나 커뮤니티에서 미리 만들어진 옵션을 사용할 수도 있습니다.

VuePress에서는 Markdown으로 콘텐츠를 작성한 다음 사전 렌더링된 정적 HTML 파일로 변환할 수 있습니다. 이러한 파일이 로드되면 사이트는 Vue, Vue Router 및 Webpack이 제공하는 단일 페이지 애플리케이션으로 실행됩니다.

VuePress의 주요 장점 중 하나는 Vue 코드나 구성 요소를 Markdown 파일에 포함할 수 있다는 것입니다. 이는 일반 Vue 앱처럼 웹사이트를 개발하고 모든 이점을 얻을 수 있으므로 강력한 성능과 유연성을 제공합니다.

보려면 여기를 클릭하세요. VuePress

Gridsome

Gridsome은 VuePress와 많은 유사점이 있지만 데이터 소스를 다룰 때 매우 강력한 접근 방식을 취합니다. 이를 통해 애플리케이션의 다양한 데이터를 연결하고 소비한 다음 이 데이터를 GraphQL 계층에 통합할 수 있습니다. 기본적으로 Gridsome은 프런트 엔드 기능에 Vue를 사용하고 데이터 관리에 GraphQL을 사용합니다. 작동 방식은 다음 세 단계로 요약할 수 있습니다.

• Markdown, JSON, YAML 또는 CVS 데이터 형식으로 콘텐츠를 제공하거나 WordPress 또는 Drupal과 같은 CMS에서 콘텐츠를 가져옵니다.

• 콘텐츠는 중앙 집중식 데이터 관리를 제공하는 GraphQL 레이어로 변환됩니다. 그런 다음 이 데이터를 사용하여 Vue를 통해 애플리케이션을 구축할 수 있습니다.

• 사전 렌더링된 HTML 파일을 Netlify, Amazon S3, Now.sh, Surge.sh 등과 같은 정적 웹 호스트 또는 CDN에 배포할 수 있습니다.

Gridsome은 코드 분할, 자산 최적화, 프로그레시브 이미지 및 링크 프리페칭과 같은 몇 가지 훌륭한 모범 사례를 제공합니다. 따라서 Gridsome은 빠르고 PWA를 지원하며 SEO 친화적입니다.

보려면 여기를 클릭하세요: Gridsome

Vuex

상태 관리는 개발자가 웹 애플리케이션을 구축하는 동안 직면하는 주요 문제 중 하나입니다. 이 문제를 해결하기 위해 Vue는 상태 관리 시스템인 Vuex을 제공합니다. 상태는 예측 가능한 방식으로만 변경될 수 있는 애플리케이션의 모든 구성 요소에 대한 중앙 집중식 저장소 역할을 합니다. 저장소는 네 부분으로 나누어진 특수 개체입니다.

• state - 애플리케이션 데이터를 저장하는 개체

• getters - 상태에 대한 액세스를 추상화하는 메서드가 포함된 개체

• mutations - 직접적인 효과가 포함된 개체 상태 메소드

• actions - 돌연변이를 유발하고 비동기 코드를 실행하는 메소드를 포함하는 객체

store는 더 나은 유지 관리를 위해 여러 모듈로 나눌 수도 있습니다.

보려면 여기를 클릭하세요. Vuex

Nuxt

서버 측 렌더링(SSR)을 사용할 때는 일반적으로 Nuxt가 사용됩니다. 이는 범용 애플리케이션을 구축하기 위한 간단하고 간단한 프레임워크입니다. 또한 모듈식이므로 애플리케이션에 필요한 모듈만 사용할 수 있습니다.

Nuxt를 사용하면 서버 렌더링 애플리케이션(SSR), 단일 페이지 애플리케이션(SPA), 프로그레시브 웹 애플리케이션(PWA)을 만들거나 정적 사이트 생성기로 사용할 수 있습니다.

간단히 말하면, Nuxt는 애플리케이션을 구조화하고 최적화하는 지루한 작업에서 해방되어 간소화되고 더욱 즐거운 개발 경험을 제공합니다.

보려면 여기를 클릭하세요. Nuxt

Vuetify

Vuetify는 최고의 UI 구성 요소 라이브러리 중 하나입니다. 거의 모든 애플리케이션의 요구 사항을 충족하기 위해 머티리얼 디자인 사양을 기반으로 잘 설계된 다수의 구성 요소(80개 이상)를 제공합니다.

이를 사용하여 SSR 애플리케이션, SPA, PWA 및 모바일 애플리케이션을 구축할 수 있습니다. 새 앱을 시작하거나 기존 앱에 추가할 수 있습니다. 무료 및 프리미엄 테마를 제공하지만 직접 만들 수도 있습니다. 또한, 사용 중인 구성요소만 선별하여 선택할 수 있는 시스템을 제공하여 최종 애플리케이션 크기를 대폭 줄여줍니다.

Vuetify의 모든 구성 요소는 잘 문서화되어 있으며 명확한 예가 제공됩니다.

보려면 여기를 클릭하세요: Vuetify

Quasar

Quasar은 "한 번 작성하면 어디서나 실행"이라는 Java 철학의 JavaScript 버전입니다. 동일한 코드 기반을 사용하여 다양한 플랫폼용 애플리케이션을 작성할 수 있는 범용 Vue 지원 프레임워크입니다. spas, pwas, ssr 앱, 하이브리드 모바일 앱 또는 다중 플랫폼 데스크톱 앱 등 무엇이든 지정할 수 있습니다!

성능과 반응성을 염두에 두고 설계된 훌륭한 문서와 수많은 구성 요소가 포함되어 있습니다. Quasar는 기본적으로 모범 사례(html/css/js 축소, 캐시 무효화, 트리 쉐이킹, 소스 매핑, 지연 로딩을 위한 코드 분할, es6 전송, 코드 린팅, 접근성)를 통합하므로 주로 애플리케이션 프로그램 기능에 집중할 수 있습니다. 또한 새 프로젝트를 쉽게 구축할 수 있는 CLI 도구도 제공합니다.

보려면 여기를 클릭하세요. Quasar

Storybook

Vue는 기본적으로 구성 요소 기반 프레임워크이므로 훌륭하고 효율적인 구성 요소를 작성하는 것은 모든 애플리케이션 개발자에게 중요합니다. 이 과정에서 Storybook이 도움이 될 수 있습니다. 이를 통해 사용하기 쉽고 격리된 환경에서 UI 구성 요소를 개발, 관리 및 테스트할 수 있습니다. 이 도구를 사용하면 개발자는 기본 애플리케이션과 독립적으로 구성 요소를 생성하고 애플리케이션별 종속성 및 요구 사항에 대해 걱정할 필요 없이 격리된 개발 환경에서 대화형으로 표시할 수 있습니다.

Storybook은 다양한 추가 기능과 유연한 API를 제공하여 필요에 따라 Storybook을 사용자 정의할 수 있습니다. 정적 웹 애플리케이션을 내보내고 프로젝트를 HTTP 서버에 배포하는 것도 가능합니다.

보려면 여기를 클릭하세요: Storybook

Vue Apollo

최근 GraphQL에 대한 많은 논의가 있었습니다. 따라서 이미 익숙하고 Vue와 통합하고 싶다면 Vue Apollo를 사용해 보세요. 이 라이브러리를 사용하면 Vue 및 GraphQL/Apollo 작업이 더욱 원활하고 즐거워집니다.

보려면 여기를 클릭하세요: Vue Apollo

Eagle.js

Eagle.js은 Vue로 구축된 강력하고 유연하며 독특한 슬라이드쇼 시스템입니다. 이를 통해 프레젠테이션에서 쉽게 재사용 가능한 구성 요소, 슬라이드 및 스타일을 만들 수 있습니다. 또한 애니메이션, 테마 및 대화형 위젯을 지원하므로 웹 프레젠테이션 제작에 적합합니다. Eagle.js에는 간단하고 해킹하기 쉬운 API가 있으므로 원하는 슬라이드쇼를 만드는 데 진정한 자유가 있습니다.

이 라이브러리로 할 수 있는 가장 큰 작업 중 하나는 슬라이드를 별도의 파일에 넣은 다음 다른 슬라이드 쇼에서 재사용하는 것입니다. 특정 슬라이드의 슬라이드를 다른 슬라이드로 가져올 수도 있습니다. 이러한 강력한 도구를 사용하면 복잡하고 대화형이며 재미있는 프레젠테이션을 만들 수 있습니다.

여기를 클릭하여 확인하세요: Eagle.js

5개의 더 유명한 Vue 도구 및 라이브러리

• Vue DevTools는 Vue 및 Vuex 애플리케이션 디버깅을 위한 훌륭한 브라우저 확장입니다.

• Vue Test Utils는 Vue 구성 요소를 테스트하는 데 유용한 유틸리티 모음입니다.

• Vue Router는 Vue의 공식 라우터입니다.

• Vue Native는 React Native와 유사한 모바일 애플리케이션용 JavaScript 프레임워크입니다.

• Weex는 Vue를 포함한 최신 웹 기술을 사용하여 모바일 애플리케이션을 구축하기 위한 프레임워크입니다.

원본 주소: https://www.zeolearn.com/interview-questions/vue-js

관련 추천:

2020 프론트엔드 Vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 추천: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 10개 이상의 인기 Vue.js 도구 및 라이브러리(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!