연구할 가치가 있는 20가지 Vue 오픈소스 프로젝트

React에 비해 Vue의 장점 중 하나는 이해하고 배우기 쉽다는 점이며, 중국에서 대다수를 차지합니다. Vue의 도움으로 모든 웹 애플리케이션을 만들 수 있습니다. 따라서 새롭고 사용하기 쉬운 Vue 오픈 소스 프로젝트를 최신 상태로 유지하는 것도 중요합니다. 한편으로는 보다 효율적으로 개발하는 데 도움이 될 수 있고, 다른 한편으로는 Vue의 본질을 배울 수도 있습니다. 모델.

다음으로 유용한 새 오픈 소스 프로젝트를 살펴보겠습니다.

uiGradients

URL: http://uigradients.com/

GitHub: https://github.com/ghosh/uiGradients

GitHub 별: 4.6k 4.6k

彩色阵列和出色的UX使是这个项目的一个亮点，渐变仍然是网页设计中日益增长的趋势。 咱们可以选择所需的颜色，并可以获得所有可能的渐变，并获取对应的 CSS 代码， 赶紧收藏起来吧。

CSSFX

CSS 过度效果的集合

网址： https://cssfx.dev

GitHub：https://github.com/jolaleye/cssfx

GitHub Stars: 3.5k

CSSFX 里面有很多 CSS 过滤效果，咱们可以根据需求选择特定的动画，点击对应的效果即可看到生成的 CSS 代码，动手搞起来吧。

Sing App Vue Dashboard

一个管理模板

网址： https://flatlogic.com/templates/sing-app-vue-dashboard

GitHub： https://github.com/flatlogic/sing-app-vue-dashboard

GitHub Stars: 254

事例：https://flatlogic.com/templates/sing-app-vue-dashboard/demo

文档：https://demo.flatlogic.com/sing-app/documentation/

这是基于最新 Vue 和 Bootstrap 免费和开源的管理模板，其实跟咱们国内的 vue-admin-template 差不多。咱们不一定要使用它，但可以研究学习源码，相信可以学到很多实用的技巧，加油少年。

Vue Storefront

网址：  https://www.vuestorefront.io

GitHub： https://github.com/vuestorefront/vue-storefront

GitHub Stars: 5.8k

这是一个PWA，可以连接到任何后端(或几乎任何后端)。这个项目的主要优点是使用了无头架构。这是一种全面的解决方案，为咱们提供了许多可能性(巨大的支持稳步增长的社区，服务器端渲染，将改善网页SEO，移动优先的方法和离线模式。

Faviator

图标生成的库

网址：  https://www.faviator.xyz

GitHub： https://www.faviator.xyz/playground

GitHub Stars: 94

如果需要创建一个图标增加体验度。 可以使用任何 Google 字体以及任何颜色。只需通过首选的配置，然后选择PNG，SVG或JPG格式即可。

iView

Vue UI 组件库

网址：  https://iviewui.com/

GitHub： https://github.com/iview/iview

GitHub Stars: 22.8k

不断迭代更新使这组UI组件成为具有任何技能水平的开发人员的不错选择。

要使用iView，需要对单一文件组件有充分的了解，该项目具有友好的API和大量文档。

Postwoman

API请求构建器

网址： https://postwoman.io/

GitHub： https://github.com/hoppscotch/hoppscotch

GitHub Stars: 10.5k

색상 배열과 훌륭한 UX는 이 프로젝트의 하이라이트이며 그라디언트는 웹 디자인에서 여전히 증가하는 추세입니다. 원하는 색상을 선택하고, 가능한 모든 그라데이션을 얻고, 해당 CSS 코드를 빠르게 수집할 수 있습니다.

CSSFX

CSS 전환 효과 모음

URL:

https://cssfx.dev

GitHub: 🎜https://github.com/jolaleye/cssfx🎜🎜🎜GitHub 별:🎜 3.5k🎜🎜🎜🎜CSSFX에는 많은 CSS 필터링 효과가 있습니다. 필요에 따라 특정 애니메이션을 선택할 수 있습니다. 해당 효과를 클릭하면 생성된 CSS 코드를 볼 수 있습니다. 시작해 보겠습니다. 🎜🎜Sing App Vue 대시보드🎜🎜관리 템플릿🎜🎜🎜URL: 🎜 https://platlogic.com/templates/sing-app-vue-dashboard🎜🎜🎜GitHub: 🎜 https://github.com/platlogic/ sing-app-vue-dashboard🎜🎜🎜GitHub Stars:🎜 254🎜🎜🎜예: 🎜https://platlogic.com/templates/sing-app-vue-dashboard/demo🎜🎜🎜 문서: 🎜https://demo.Flatlogic.com/sing-app/documentation/🎜🎜🎜🎜최신 Vue 및 Bootstrap을 기반으로 한 무료 오픈소스 관리 템플릿입니다. 실제로 국내 vue-admin-template과 유사합니다. 꼭 사용할 필요는 없지만 소스 코드를 연구하고 연구하면 많은 실용적인 기술을 배울 수 있다고 믿습니다. 🎜🎜Vue Storefront🎜🎜🎜웹사이트:🎜 https://www.vuestorefront.io🎜🎜🎜GitHub:🎜 https://github.com/vuestorefront/vue-storefront🎜🎜🎜GitHub 별:🎜 5.8k 🎜🎜🎜🎜모든 백엔드(또는 거의 모든 백엔드)에 연결할 수 있는 PWA입니다. 이 프로젝트의 가장 큰 장점은 헤드리스 아키텍처를 사용한다는 것입니다. 이는 우리에게 많은 가능성(꾸준히 성장하는 커뮤니티의 막대한 지원, 웹 SEO를 개선할 서버 측 렌더링, 모바일 우선 접근 방식 및 오프라인 모드)을 제공하는 포괄적인 솔루션입니다. 🎜🎜Faviator🎜🎜아이콘 생성 라이브러리🎜🎜🎜 URL:🎜 https://www.faviator.xyz🎜🎜🎜GitHub:🎜 https://www.faviator.xyz/playground🎜🎜🎜GitHub 별:🎜 94🎜🎜 🎜 🎜필요한 경우 생성 아이콘이 추가됩니다 Google 글꼴과 색상을 사용하세요. PNG, SVG 또는 JPG 형식을 선택하세요. 🎜🎜iView🎜🎜Vue UI 구성 요소 라이브러리 🎜🎜🎜 https: //iviewui.com/🎜🎜🎜GitHub:🎜 https://github .com/iview/iview🎜🎜🎜GitHub 별:🎜 22.8k🎜🎜🎜🎜지속적인 반복 업데이트를 통해 이 UI 구성 요소 세트는 어떤 기술에도 적합합니다. 숙련된 개발자에게 좋은 선택입니다. 🎜🎜iView를 사용하려면 싱글에 대한 좋은 이해 파일 구성 요소가 필요하며 프로젝트에는 친숙한 API와 광범위한 문서가 있습니다 🎜🎜🎜🎜API 요청 빌더🎜🎜🎜웹사이트: 🎜 https ://postwoman.io/🎜🎜🎜GitHub:🎜 https://github.com/hoppscotch /hoppscotch🎜🎜🎜GitHub Stars:🎜 10.5k🎜🎜🎜🎜🎜이 도구는 Postman과 유사하며, 참가자가 많으며 다중 플랫폼 및 다중 장치를 지원합니다. 정말 빠르며, 도구 제작자는 가까운 시일 내에 더 많은 기능이 추가될 것이라고 주장합니다. 🎜🎜Vue 가상 스크롤러🎜🎜빠른 스크롤🎜🎜🎜URL: 🎜 https://akryum.github.io/vue-virtual-scroller/#/🎜

GitHub: https://github.com/Akryum/vue-virtual-scroller

GitHub Stars: 3.4k3.4k

Vue Virtual Scroller具有四个主要组件。 RecycleScroller可以渲染列表中的可见项。 如果咱们不知道数据具体的数量，最好使用DynamicScroller。 DynamicScrollerItem将所有内容包装在DynamicScroller中（以处理大小更改）。 IdState简化了本地状态管理（在RecycleScroller内部）。

Mint UI

移动端的 UI 库

网址： http://mint-ui.github.io/#!/en

GitHub： https://github.com/ElemeFE/mint-ui

GitHub Stars: 15.2k

使用现成的CSS和JS组件更快地构建移动应用程序。使用此工具，咱们不必承担文件大小过大的风险，因为可以按需加载。动画由CSS3处理，由此来提高性能。

V Calendar

用于构建日历的无依赖插件

网址： https://vcalendar.io

GitHub： https://github.com/nathanreyes/v-calendar

GitHub Stars: 1.6k

您可以选择不同的视觉指示器来装饰日历。 V Calendar还为咱们提供了三种日期选择模式：

• 单选
• 多选
• 日期范围

Vue Design System

一组UI工具

网址：  https://vueds.com/

GitHub： https://github.com/viljamis/vue-design-system

GitHub Stars: 1.7k

这是一种组织良好的工具，对于任何web开发团队来说，它的命名都很容易理解。其中一个很大的优点是使用了更漂亮的代码格式化器，它可以在提交到Git之前自动排列代码。

Proppy

UI组件的功能道具组合

网址： https://proppyjs.com

GitHub： https://github.com/fahad19/proppy

GitHub Stars: 856

ProppyJS 是一个很小的库，用于组合道具，它附带了各种集成包，让您可以自由地使用它流行的渲染库。

我们的想法是首先将Component的行为表达为props，然后使用Proppy的相同API将其连接到您的Component（可以是React，Vue.js或Preact）。

API还允许您访问其他应用程序范围的依赖项（如使用Redux的商店），以方便组件树中的任何位置。

Light Blue Vue Admin

vue 后台展示模板

网址： https://flatlogic.com/templates/light-blue-vue-lite

GitHub： https://github.com/flatlogic/light-blue-vue-admin

GitHub Stars: 79

事例: https://demo.flatlogic.com/light-blue-vue-admin/#/app/dashboard

文档: https://github.com/flatlogic/light-blue-vue-admin

模板是用Vue CLI和Bootstrap 4

Vue 가상 스크롤러

네 가지 주요 구성 요소가 있습니다. RecycleScroller는 목록에 표시되는 항목을 렌더링할 수 있습니다. 구체적인 데이터 양을 모르는 경우 DynamicScroller를 사용하는 것이 가장 좋습니다. DynamicScrollerItem은 DynamicScroller의 모든 항목을 래핑합니다(크기 변경을 처리하기 위해). IdState는 로컬 상태 관리를 단순화합니다(RecycleScroller 내부).

Mint UI

모바일 UI 라이브러리

웹사이트:

http://mint-ui.github.io/#!/en

GitHub:

https://github.com/ElemeFE/mint- ui

GitHub 별:

15.2k

기성 CSS 및 JS 구성 요소를 사용하여 모바일 앱을 더 빠르게 구축하세요. 이 도구를 사용하면 요청 시 로드할 수 있으므로 파일 크기가 너무 커질 위험이 없습니다. 애니메이션은 성능 향상을 위해 CSS3에서 처리됩니다.

🎜V Calendar🎜🎜캘린더 작성을 위한 종속성 없는 플러그인🎜🎜🎜URL: 🎜 https://vcalendar.io🎜🎜🎜GitHub: 🎜 https://github.com/nathanreyes/v-calendar🎜🎜🎜GitHub Stars :🎜 1.6k🎜🎜🎜🎜다양한 시각적 표시기를 선택하여 달력을 꾸밀 수 있습니다. 🎜V Calendar🎜는 또한 세 가지 날짜 선택 모드를 제공합니다: 🎜

• 단일 선택
• 다중 선택
• 날짜 범위

🎜Vue 디자인 시스템🎜🎜UI 도구 세트🎜🎜🎜웹사이트: 🎜 https://vueds.com/🎜🎜🎜GitHub: 🎜 https://github.com/viljamis/vue-design-system🎜🎜🎜GitHub 별: 🎜 1.7k🎜🎜🎜🎜이 도구는 모든 웹 개발 팀이 이해하기 쉬운 이름을 사용하여 잘 구성된 도구입니다. 가장 큰 장점 중 하나는 Git에 커밋하기 전에 코드를 자동으로 정렬하는 더 멋진 코드 포맷터를 사용한다는 것입니다. 🎜🎜Proppy🎜🎜UI 구성 요소를 위한 기능적 소품 조합🎜🎜🎜URL: 🎜 https://proppyjs.com🎜🎜🎜GitHub: 🎜 https://github.com/fahad19/proppy🎜🎜🎜GitHub 별:🎜 856🎜🎜🎜🎜ProppyJS는 props를 결합하기 위한 작은 라이브러리이며 인기 있는 렌더링 라이브러리를 자유롭게 사용할 수 있는 다양한 통합 패키지와 함께 제공됩니다. 🎜🎜먼저 구성 요소의 동작을 props로 표현한 다음 동일한 Proppy API를 사용하여 이를 구성 요소(React, Vue.js 또는 Preact일 수 있음)에 연결하는 것이 아이디어입니다. 🎜🎜API를 사용하면 구성 요소 트리의 어느 곳에서나 편리하게 다른 애플리케이션 전체 종속성(예: Redux를 사용하는 저장소)에 액세스할 수 있습니다. 🎜🎜Light Blue Vue Admin🎜🎜vue 백엔드 디스플레이 템플릿🎜🎜🎜웹사이트: 🎜 https://platlogic.com/templates/light-blue-vue-lite🎜🎜🎜GitHub: 🎜 https://github.com/platlogic /light-blue-vue-admin🎜🎜🎜GitHub 별:🎜 79🎜🎜🎜🎜🎜예:🎜 https://demo .Flatlogic.com/ light-blue-vue-admin/#/app/dashboard🎜🎜🎜문서:🎜 https://github.com/platlogic/light-blue-vue-admin🎜🎜템플릿이 Vue CLI를 사용하고 있습니다. > Bootstrap 4로 구축되었습니다. 데모에서 볼 수 있듯이 이 템플릿에는 타이포그래피, 지도, 차트, 채팅 인터페이스 등 매우 기본적인 페이지 세트가 있습니다. 확장된 템플릿이 필요한 경우 60개 이상의 구성 요소가 있고 jquery가 없으며 두 가지 색상 테마가 있는 Light Blue Vue Full을 살펴볼 수 있습니다. 🎜🎜Vue API Query🎜🎜REST API에 대한 빌드 요청🎜🎜🎜GitHub:🎜 https://github.com/robsontenorio/vue-api-query🎜🎜🎜GitHub Stars:🎜 1.1k🎜🎜🎜🎜🎜이 프로젝트 정보 별로 할 말이 없습니다. 이는 설명 줄에 작성된 것과 정확히 일치합니다. 즉, REST API에 대한 요청을 구성하는 데 도움이 됩니다. 🎜🎜Vue 그리드 레이아웃🎜🎜Vue의 그리드 레이아웃🎜🎜🎜웹사이트:🎜 https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html🎜

GitHub: https://github.com/jbaysolutions/vue-grid-layout

GitHub Stars: 3.1k

모든 그리드 관련 문제에 대한 간단한 솔루션입니다. 정적이며 크기 조정이 가능하고 드래그 가능한 위젯이 있습니다. 또는 응답과 레이아웃을 복원하고 직렬화할 수 있습니다. 위젯을 하나 더 추가해야 하는 경우 전체 그리드를 다시 빌드할 필요가 없습니다.

Vue 콘텐츠 로더

자리 표시자 로더 만들기

웹사이트: http://danilowoz.com/create-v...
GitHub: https://github.com/egoist/vue- content- loader

GitHub Stars: 2k

웹사이트나 앱을 개발할 때 콘텐츠가 너무 많고 로딩 속도가 느리면 사용자가 페이지를 열게 되고 내용이 많아지게 됩니다. 빈 페이지의 vue-content -loader는 이 문제를 해결하는 구성 요소로, 사용자 경험을 개선하기 위해 콘텐츠를 로드하기 전에 dom 템플릿을 생성합니다. vue-content-loader正是解决这个问题的一个组件，使加载内容之前生成一个dom模板，提高用户体验。

Echarts with Vue2.0

数据可视化

Website:https://simonzhangiter.github.io/DataVisualization/#/dashboard 
GitHub: https://github.com/SimonZhangITer/DataVisualization
GitHub Stars: 1.3k

在图片中，咱们可以看到非常漂亮的图表。这个项目使任何数据都更具可读性，更容易理解和解释。它允许咱们在任何数据集中轻松地检测趋势和模式。

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。

Vue.js Modal

高度可定制的模态框

Website: http://vue-js-modal.yev.io/
GitHub: https://github.com/euvl/vue-js-modal
GitHub Stars: 2.9k

可以在该网站上查看所有不同类型的模态。 有15个按钮，按任意一个按钮，看到一个模态示例。

Vuesax

框架组件

Website: https://lusaxweb.github.io/vuesax/
GitHub: https://github.com/lusaxweb/vuesax
GitHub Stars: 3.7k

这个项目在社区中很受欢迎。 它使咱们可以为每个组件设计不同的风格。 Vuesax的创建者强调，每个Web开发人员在进行Web设计时都应有选择的自由。

Vue2 Animate

vue2.0 —使用animate.css 构建项目和创建组件

Website: https://the-allstars.com/vue2-animate/
GitHub: https://github.com/asika32764/vue2-animate
GitHub Stars: 1.1k

这个库是跨浏览器的，咱们可以选择从5种类型的动画: rotate，slide，fade，bounce和zoom

Vue2.0을 사용한 Echarts

데이터 시각화

웹사이트:

https://simonzhangiter.github.io/DataVisualization/#/dashboard

GitHub: https://github.com/SimonZhangITer/DataVisualization
GitHub Stars: 1.3k

사진을 보면 아주 아름다운 차트가 보입니다. 이 프로젝트는 모든 데이터를 더 읽기 쉽고 이해하고 해석하기 쉽게 만듭니다. 이를 통해 모든 데이터 세트에서 추세와 패턴을 쉽게 감지할 수 있습니다.

다들 이력서에 쓸 프로젝트가 없다고 해서 프로젝트 찾는 걸 도와줬고 [건축 튜토리얼]도 넣었어요.

Vue.js Modal고도로 사용자 정의 가능한 모달 상자

---

웹사이트: http://vue-js-modal.yev.io/

GitHub:🎜 https://github.com/euvl /vue- js-modal🎜🎜GitHub 별:🎜 2.9k🎜🎜🎜🎜이 웹사이트에서는 다양한 유형의 모달을 모두 볼 수 있습니다. 15개의 버튼이 있습니다. 아무 버튼이나 누르면 모달 예시를 볼 수 있습니다. 🎜🎜Vuesax🎜🎜프레임워크 구성요소🎜🎜🎜웹사이트:🎜 https://lusaxweb.github.io/vuesax/🎜🎜GitHub:🎜 https://github.com/lusaxweb/vuesax🎜🎜GitHub 별 수:🎜 3.7k🎜 🎜 🎜🎜이 프로젝트 커뮤니티에서 매우 인기가 있습니다. 이를 통해 각 구성 요소에 대해 다양한 스타일을 디자인할 수 있습니다. Vuesax의 제작자는 모든 웹 개발자가 웹을 디자인할 때 선택의 자유를 가져야 한다고 강조합니다. 🎜🎜Vue2 Animate🎜🎜vue2.0 — animate.css를 사용하여 프로젝트를 빌드하고 구성 요소를 만듭니다. 🎜🎜🎜웹사이트:🎜 https://the-allstars.com/ vue2 -animate/🎜🎜GitHub:🎜 https://github.com/asika32764/vue2-animate🎜🎜GitHub 별:🎜 1.1k🎜🎜🎜🎜이 라이브러리는 크로스 브라우저이므로 5가지 유형의 애니메이션 중에서 선택할 수 있습니다. 먹었다 , 슬라이드, 페이드, 바운스 및 줌. 웹사이트에 데모가 있습니다. 애니메이션의 기본 지속 시간은 1초이지만 이 매개변수를 사용자 정의할 수 있습니다. 🎜🎜🎜Vuetensils🎜🎜🎜Vue.js용 도구 세트🎜🎜🎜웹사이트:🎜 https://vuetensils.stegosource.com/🎜🎜GitHub:🎜 https://github.com/AustinGil/Vuetensils🎜🎜GitHub 별: 🎜 111🎜🎜🎜🎜🎜 이 UI 라이브러리에는 표준 기능이 있지만 멋진 점은 추가 스타일이 없다는 것입니다. 디자인을 가능한 한 개인적으로 만들고 모든 요구 사항에 적용할 수 있습니다. 필요한 스타일을 작성하여 프로젝트에 추가하고 필요한 만큼 구성 요소를 포함하면 됩니다. 🎜🎜🎜본 블로그에 오류나 제안사항이 있으면 언제든지 메시지를 남겨주세요. 마지막으로 시청해 주신 모든 분들께 감사드립니다. 🎜🎜🎜🎜🎜 나중에 이러한 버그를 해결하기 위해 유용한 버그 모니터링 도구인 Fundebug를 추천하고 싶습니다. . 🎜🎜