17 가지 우수한 Vue UI 구성 요소 라이브러리 권장 사항
Vue는 간단하고 명확한 API를 사용하고 빠르게 시작할 수있는 경량의 고성능 구성 요소 기반 MVVM 라이브러리입니다. Vue가 출시 된 이래 많은 웹 개발자가 인정했습니다.
회사의 웹 프런트 엔드 프로젝트 개발에서 Vue 기반 UI 구성 요소 프레임 워크를 사용하여 여러 프로젝트를 개발하고 공식적으로 사용했습니다.
개발팀이 Vue.js 프레임 워크와 UI 컴포넌트 라이브러리를 사용한 후 개발 효율성이 크게 향상되고 자체적으로 작성된 코드도 줄어들고 많은 인터페이스 효과 컴포넌트가 패키징되었습니다.
Vue UI 구성 요소 라이브러리를 선택하는 과정에서 일부 우수한 Vue UI 구성 요소 라이브러리도 수집되어 별 수, 문서의 풍부함, 업데이트 빈도 및 유지 관리를 기준으로 GitHub에 정렬되었습니다.
추신 : 대부분의 국내 UI 구성 요소는 일부일 뿐이며 일반적으로 사용되는 헤드 탐색, 하단 탐색, 목록보기 및 그리드 테이블은 사용할 수 없습니다. 나중에 Vue 기반 Quasar 프레임 워크가이 프레임 워크 UI 구성 요소를 매우 포괄적으로 도입했음을 알게되었고 다음에이 프레임 워크를 사용할 준비가되었습니다.
Vue http://www.quasarchs.com/ 기반 Quasar Framework Chinese 웹 사이트
quasarframework / quasar : Quasar 프레임 워크
https://github.com/quasarframework/quasar
Quasar (/kweɪ.zɑɹ/로 발음)는 웹 개발자가 다음을 만드는 데 도움이 될 수있는 MIT 라이선스 오픈 소스 프레임 워크 (Vue 기반)입니다.
- 반응 형 웹 사이트
- PWA (Progressive Web App
- Apache Cordova를 통해 모바일 앱 (Android, iOS 등) 빌드
- 멀티 플랫폼 데스크톱 애플리케이션 (Electron 사용)
Quasar를 사용하면 개발자가 코드를 한 번 작성한 다음 동일한 코드베이스를 사용하여 웹 사이트, PWA, 모바일 앱 및 Electron 앱으로 동시에 배포 할 수 있습니다. 가장 발전된 CLI를 사용하여 응용 프로그램을 설계하고 잘 작성된 매우 빠른 Quasar 웹 구성 요소를 제공합니다. Quasar를 사용할 때 Hammerjs, Momentjs 또는 Bootstrap과 같은 추가로 무거운 라이브러리가 필요하지 않습니다. 이러한 기능을 가지고 있으며 매우 작습니다!
==============
1. iView UI 컴포넌트 라이브러리
iView (현재 이름 : View UI. View-design)는 주로 PC 인터페이스의 중간 및 백엔드 제품을 제공하는 Vue.js 기반의 오픈 소스 UI 구성 요소 라이브러리 세트입니다. iView의 구성 요소는 비교적 완전하고 업데이트도 빠르며 설명서가 매우 자세합니다. 회사 팀에서 유지 관리하는 비교적 안정적인 Vue UI 구성 요소 프레임 워크입니다. iView 생태계도 잘 작동하고 있으며 iView 관리자는 오픈 소스이므로 백엔드를 수행하는 데 매우 편리합니다. 공식 웹 사이트에 따르면 iView는 TalkingData, Alibaba, Baidu, Tencent, Toutiao, JD.com, Didi Chuxing, Meituan, Sina, Lenovo 및 기타 대기업의 제품에 사용되었습니다.
iView 공식 웹 사이트 : https://www.iviewui.com/
2. Vux UI 컴포넌트 라이브러리
Vux는 WeUI 및 Vue2.x를 기반으로 개발 된 모바일 UI 구성 요소 라이브러리로 주로 WeChat 페이지를 제공합니다. Vux의 위치는 매우 명확합니다 하나는 Vue 모바일 UI 컴포넌트 라이브러리이고 다른 하나는 WeUI의 기본 스타일 라이브러리입니다. Vux 구성 요소는 모든 WeUI 콘텐츠를 포함하며 일반적으로 사용되는 일부 구성 요소도 확장합니다. 예 : 고정, 타임 라인, v- 차트, XCircle. Vux는 개인적으로 관리됩니다. 그러나 GitHub의 별은 여전히 매우 높으며 13k에 도달합니다. GitHub에서 문제가 빠르게 종결되었음을 확인했습니다. Vux 문서의 기본 구성 요소 사용법과 효과가 모두 설명되어 있습니다. 많은 Vux 사용 사례가 vux 공식 웹 사이트에도 표시됩니다. WeChat 페이지의 개발에는 기본적으로 버그가 많지 않고 비교적 원활하게 개발됩니다.
Vux 공식 웹 사이트 : https://vux.li/
3. 요소 UI 컴포넌트 라이브러리
개발자, 디자이너 및 제품 관리자를위한 Vue 2.0 기반 데스크톱 구성 요소 라이브러리 세트 인 Element. Element는 Ele.me에서 오픈 소스로 유지 관리하는 Vue UI 컴포넌트 라이브러리입니다. 업데이트 빈도는 여전히 매우 높습니다. 새로운 버전은 기본적으로 1 주일에서 반달 이내에 출시 될 예정입니다. 구성 요소는 기본적으로 백그라운드에서 필요한 모든 구성 요소를 포함하고 있으며 설명서가 자세히 설명되어 있으며 예제도 매우 풍부합니다. 실제로 사용하지 않았으며 인터넷에 많은 Element 자습서와 기사가 있습니다. 요소는 상대적으로 고품질의 Vue UI 구성 요소 라이브러리 여야합니다.
Element 공식 웹 사이트 : http://element.eleme.io/#/zh-CN
4. Mint UI 컴포넌트 라이브러리
Mint UI는 Ele.me의 프런트 엔드 프로젝트에서 가져온 Vue.js의 모바일 구성 요소 라이브러리를 기반으로합니다. Mint UI는 진정한로드 온 디맨드 구성 요소입니다. 선언 된 구성 요소와 해당 스타일 파일 만로드 할 수 있습니다. Mint UI는 CSS3를 사용하여 다양한 동적 효과를 처리하고 브라우저의 불필요한 다시 그리기 및 재배치를 피하여 사용자가 부드럽고 매끄러운 경험을 얻을 수 있습니다. 많은 온라인 비디오 튜토리얼이 Mint UI를 기반으로하고 있으며 모바일 웹 프로젝트를 개발하는 것이 매우 편리하고 문서가 매우 간단하고 명확합니다. Mint UI 구성 요소의 많은 페이지가 캡슐화되어 있으며 기본적으로 예제에 따라 작성할 수 있으며 간단한 조정으로 구현할 수 있습니다. 그러나 GitHub의 마지막 코드 제출은 2018 년 1 월 16 일이었습니다. 프로젝트가 상대적으로 안정적이고 업데이트되지 않았는지 또는 프로젝트가 중단되었는지 모르겠습니다.
Mint UI 공식 웹 사이트 : http://mint-ui.github.io/#!/zh-cn
5. Bootstrap-Vue UI 컴포넌트 라이브러리
Bootstrap-VUE는 vue2를 기반으로 Bootstrap V4 구성 요소 및 그리드 시스템의 구현을 제공하고 광범위하고 자동화 된 WAI ARA 접근성 표시를 완료합니다. Bootstrap 4는 최신 릴리스 버전으로 Bootstrap 3에 비해 더 구체적인 클래스가 있으며 일부 관련 부품을 관련 구성 요소로 전환합니다. 동시에 Bootstrap.min.css의 볼륨이 40 % 이상 감소했습니다. Bootstrap4는 IE8 및 iOS 6에 대한 지원을 포기했으며 이제 IE9 이상 및 iOS 7 이상 브라우저 만 지원합니다. 반응 형 웹 사이트가 처음 대중화되었을 때 Bootstrap은 전 세계에서 모바일 우선 웹 사이트를 구축하기위한 가장 인기있는 프레임 워크였습니다. Bootstrap은 전 세계적으로 인기가 있다고 할 수 있습니다. 지금도 많은 기업 웹 사이트가 Bootstrap을 사용하여 반응합니다. Bootstrap-Vue를 사용하면 Vue에서 Bootstrap의 효과를 얻을 수 있습니다.
Bootstrap-Vue 공식 웹 사이트 : https://bootstrap-vue.js.org/
6. Ant Design Vue UI 컴포넌트 라이브러리
Ant Design Vue는 엔터프라이즈 수준의 백엔드 제품을 개발하고 제공하는 Ant Design 3.X의 Vue 구현입니다. 여러 Ant Design Vue 구성 요소는 GitHub에서 찾을 수 있습니다. 그러나 이에 비해 Ant Design Vue는 훨씬 더 좋습니다. Ant Design Vue는 Ant Design of React 디자인 도구 시스템을 공유하고, 모든 Ant Design of React 구성 요소를 구현하고, 최신 브라우저 및 IE9 이상을 지원합니다 (폴리 필 필요). Ant Design에 익숙한 사용자는 Vue를 사용하기 쉽습니다.
Ant Design Vue 공식 웹 사이트 : https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/
7. AT-UI UI 컴포넌트 라이브러리
AT-UI는 Vue.js 2.0 기반의 Front-end UI 컴포넌트 라이브러리로, 주로 PC 웹 사이트에서 Middle 및 Back-end 제품을 빠르게 개발하는 데 사용되며 최신 브라우저와 IE9 이상을 지원합니다. AT-UI는 더욱 간소화되었으며 일반적으로 사용되는 구성 요소를 백그라운드에서 구현합니다.
AT_UI 공식 웹 사이트 : https://at-ui.github.io/at-ui/#/zh
8. Vant UI 컴포넌트 라이브러리
Vant는 가볍고 안정적인 모바일 Vue 컴포넌트 라이브러리입니다. Vant는 Youzan 팀에 의해 오픈 소스이며 주요 유지 보수는 Youzan 팀입니다. Vant Weapp은 Youzan 모바일 구성 요소 라이브러리 Vant의 작은 프로그램 버전입니다. 둘 다 동일한 시각적 사양을 기반으로하며 개발자가 작은 프로그램 응용 프로그램을 빠르게 빌드 할 수 있도록 일관된 API 인터페이스를 제공합니다. 지금까지 Vant는 Youzan의 온라인 비즈니스에서 테스트 한 50 개 이상의 구성 요소를 오픈 소스했습니다. 예 : AddressEdit 주소 편집, AddressList 주소 목록, 지역도 및 도시 선택, 카드 카드, 연락처 연락처, 쿠폰 쿠폰, GoodsAction 제품 페이지 액션 포인트, SubmitBar 제출 주문 표시 줄, Sku 제품 사양 팝업 레이어. 쇼핑몰이고 인터페이스에 신경 쓰지 않고 비즈니스 로직을 구현하는 경우 Vant 컴포넌트 라이브러리를 사용한 개발은 여전히 매우 빠릅니다.
Vant 공식 웹 사이트 : https://youzan.github.io/vant/#/zh-CN/intro
9 cube-ui UI 组件 库
cube-ui는 Vue.js 기반의 정교한 모바일 컴포넌트 라이브러리입니다. Didi의 내부 구성 요소 라이브러리에서 단순화되고 정제 된이 제품은 비즈니스에서 1 년 이상의 테스트를 거쳤으며 각 구성 요소에는 후속 통합을 보장 할 수있는 충분한 단위 테스트가 있습니다. 최고의 상호 작용 경험을 추구하십시오. 통합 된 디자인 상호 작용 표준을 따르고, 디자인 효과를 크게 복원하고, 인터페이스를 표준화하고 사용 모드를 표준화하여 개발을 더 간단하고 효율적으로 만듭니다. 주문형 도입 및 사후 컴파일 지원, 가볍고 유연하며 강력한 확장 성으로 기존 구성 요소를 기반으로 2 차 개발을 쉽게 수행 할 수 있습니다.
cube-ui 공식 웹 사이트 : https://didi.github.io/cube-ui/#/zh-CN
10, Muse-UI UI 组件 库
Muse-UI는 Vue 2.0의 우아한 Material Design UI 구성 요소 라이브러리를 기반으로합니다. Muse UI에는 다양한 비즈니스 환경에 적응할 수있는 40 개 이상의 UI 구성 요소가 있습니다. Muse UI는 테마 스타일 교체를 완료하는 데 약간의 코드 만 필요합니다. Muse UI는 복잡한 단일 페이지 애플리케이션을 개발하는 데 사용할 수 있습니다.
Muse-UI 공식 웹 사이트 : https://muse-ui.org/#/zh-CN
11. N3 컴포넌트 UI 컴포넌트 라이브러리
N3 컴포넌트 라이브러리는 Vue.js를 기반으로 구축되어 프론트 엔드 엔지니어와 풀 스택 엔지니어가 페이지와 애플리케이션을 빠르게 구축 할 수 있습니다. N3-components에는 60 개 이상의 구성 요소 목록, 사용자 지정 스타일이 있으며 다중 모델링 패러다임 (UMD)을 지원하며 개발을 위해 ES6를 사용합니다.
N3 공식 웹 사이트 : https://n3-components.github.io/N3-components/component.html
12 、 Mand Mobile
Mand Mobile은 금융 시나리오를위한 Vue 모바일 UI 구성 요소 라이브러리로 풍부하고 유연하며 실용적이며 고품질 금융 상품을 신속하게 구축하고 복잡한 금융 시나리오를 단순화합니다. Mand Mobile에는 재무 시나리오를 다루는 30 개 이상의 기본 구성 요소가 포함되어 있습니다. 매우 사용하기 쉬운 구성 요소에는 상세한 문서 및 사례 데모가 포함되어있어 가장 최첨단 기술을 흡수하고 안정성과 품질을 고려한 경량 구성 요소를 구현합니다. , 그리고 재정 현장의 전체 범위를 달성하기 위해 노력합니다.
Mand Mobile 공식 웹 사이트 : https://didi.github.io/mand-mobile/#/zh-CN/home
다음은 1.x 문서 및 데모 주소입니다. (문서 주소가 마이그레이션되었습니다.)
https://mand-mobile.github.io/1x-doc/
https://mand-mobile.github.io/2x-doc/
이전 주소를 열 수 없습니다.
13, we-vue UI 컴포넌트 라이브러리
we-vue는 Vue.js 기반의 모바일 컴포넌트 라이브러리 세트로 weui.css 스타일 라이브러리와 결합되어 WeChat 공식 계정과 같은 모바일 터미널 개발에 매우 적합한 일련의 컴포넌트를 캡슐화합니다. we-vue에는 35 개 이상의 구성 요소가 포함되어 있으며 단위 테스트 범위는 98 % 이상이며 babel-plugin-import, 완전한 온라인 문서 및 자세한 온라인 예제를 지원합니다.
we-vue 공식 웹 사이트 : https://wevue.org/
14. Veui UI 컴포넌트 라이브러리
Veui는 Baidu EFE 팀에서 개발 한 Vue 엔터프라이즈 수준 UI 구성 요소 라이브러리입니다. 현재 문서는없고 데모 만 있습니다.
GitHub는 진행중인 작업이라고 말합니다. 그러면 우리는 참을성있게 기다릴 것입니다.
Veui 공식 웹 사이트 : https://ecomfe.github.io/veui/components/#/
15. Semantic-UI-Vue UI 컴포넌트 라이브러리
Semantic-UI-Vue는 Vue.js를 기반으로 한 Semantic-UI 프레임 워크의 구현입니다.
개발 프레임 워크 인 Semantic은 개발자가 인간 친화적 인 HTML 언어를 사용하여 우아한 반응 형 레이아웃을 구축 할 수 있도록 도와줍니다. Semantic-UI-Vue는 Semantic-UI와 유사한 API 및 사용자 정의 가능한 테마 세트를 제공합니다.
Semantic-UI-Vue 공식 웹 사이트 : https://semantic-ui-vue.github.io/#/
프레임 워크 선택시 실제 웹 개발 상황과 팀의 친숙도에 따라 선택해야합니다. 좋은 UI 구성 요소 라이브러리는 웹 프로젝트에 매우 중요합니다.
16. Vue.js 머티리얼 컴포넌트 프레임 워크 — Vuetify.js
Vuetify는 머티리얼 디자인 사양에 따라 완전히 개발되었습니다. 각 구성 요소는 수작업으로 만들어져 차세대 애플리케이션을위한 최고의 UI 도구를 제공합니다. 개발은 Google 사양의 핵심 구성 요소에서 멈추지 않습니다. 커뮤니티 회원 및 스폰서의 지원으로 모든 사람이 즐길 수 있도록 더 많은 구성 요소를 설계하고 제공 할 것입니다.
주로 해외에서 인기있는 vue ui 컴포넌트로 다양한 기능과 중국어 번역이 있지만 일부는 영어로 번역이 잘되지 않습니다.
추신 : 대부분의 국내 UI 구성 요소는 일부일 뿐이며 일반적으로 사용되는 헤드 탐색, 하단 탐색, 목록보기 및 그리드 테이블은 사용할 수 없습니다.
17. 국산 JD의 경량 이동 단말기
문서 참조 : NutUI http://nutui.jd.com/#/index