关于css:2021年20-个值得学习的-Vue-开源项目

28次阅读

共计 4986 个字符,预计需要花费 13 分钟才能阅读完成。

译者:前端小智
作者:Nastassia Ovchinnikova
起源:flatlogic.com

点赞再看 ,微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景,但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录,文章的已分类,也整顿了很多我的文档,和教程材料。

最近开源了一个 Vue 组件,还不够欠缺,欢送大家来一起欠缺它,也心愿大家能给个 star 反对一下,谢谢各位了。

github 地址:https://github.com/qq44924588…

Vue 绝对不于 React 的一个长处是它易于了解和学习,且在国内占大多数。咱们能够在 Vue 的帮忙下创立任何 Web 应用程序。因而,时时理解一些新呈现又好用的 Vue 开源我的项目也是挺重要,一方面能够帮忙咱们更加高效的开发,另一方面,咱们也能够典范学习其精髓局部。

接下来看看新出的有哪些好用的开源我的项目。

uiGradients

网址: http://uigradients.com/

GitHub: https://github.com/ghosh/uiGr…

GitHub Stars: 4.6k

黑白阵列和杰出的 UX 使是这个我的项目的一个亮点,突变依然是网页设计中日益增长的趋势。咱们能够抉择所需的色彩,并能够取得所有可能的突变,并获取对应的 CSS 代码,连忙珍藏起来吧。

CSSFX

CSS 适度成果的汇合

网址: https://cssfx.dev

GitHub: https://github.com/jolaleye/c…

GitHub Stars: 3.5k

CSSFX 外面有很多 CSS 过滤成果,咱们能够依据需要抉择特定的动画,点击对应的成果即可看到生成的 CSS 代码,入手搞起来吧。

Sing App Vue Dashboard

一个治理模板

网址: https://flatlogic.com/templat…

GitHub: https://github.com/flatlogic/…

GitHub Stars: 254

事例:https://flatlogic.com/templat…

文档:https://demo.flatlogic.com/si…

这是基于最新 Vue 和 Bootstrap 收费和开源的治理模板,其实跟咱们国内的 vue-admin-template 差不多。咱们不肯定要应用它,但能够钻研学习源码,置信能够学到很多实用的技巧,加油少年。

Vue Storefront

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

GitHub: https://github.com/DivanteLtd…

GitHub Stars: 5.8k

这是一个 PWA,能够连贯到任何后端(或简直任何后端)。这个我的项目的次要长处是应用了无头架构。这是一种全面的解决方案,为咱们提供了许多可能性(微小的反对稳步增长的社区,服务器端渲染,将改善网页 SEO,挪动优先的办法和离线模式。

Faviator

图标生成的库

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

GitHub: https://www.faviator.xyz/play…

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/liyasthoma…

GitHub Stars: 10.5k

这个与 Postman 相似。它是收费的,具备许多参与者,并且具备多平台和多设施反对。这个工具真的十分快,并且有大量的更新。该工具的创建者宣称在不久的未来会有更多功能。

Vue Virtual Scroller

疾速滚动

网址: https://akryum.github.io/vue-…

GitHub: https://github.com/Akryum/vue…

GitHub Stars: 3.4k

Vue Virtual Scroller具备四个次要组件。RecycleScroller能够渲染列表中的可见项。如果咱们不晓得数据具体的数量,最好应用 DynamicScrollerDynamicScrollerItem 将所有内容包装在 DynamicScroller 中(以解决大小更改)。IdState简化了本地状态治理(在 RecycleScroller 外部)。

Mint UI

挪动端的 UI 库

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

GitHub: https://github.com/ElemeFE/mi…

GitHub Stars: 15.2k

应用现成的 CSS 和 JS 组件更快地构建挪动应用程序。应用此工具,咱们不用承当文件大小过大的危险,因为能够按需加载。动画由 CSS3 解决,由此来进步性能。

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

V Calendar

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

网址: https://vcalendar.io

GitHub: https://github.com/nathanreye…

GitHub Stars: 1.6k

您能够抉择不同的视觉指示器来装璜日历。V Calendar还为咱们提供了三种日期抉择模式:

  • 单选
  • 多选
  • 日期范畴

Vue Design System

一组 UI 工具

网址: https://vueds.com/

GitHub: https://github.com/viljamis/v…

GitHub Stars: 1.7k

这是一种组织良好的工具,对于任何 web 开发团队来说,它的命名都很容易了解。其中一个很大的长处是应用了更丑陋的代码格式化器,它能够在提交到 Git 之前主动排列代码。

Proppy

UI 组件的性能道具组合

网址: https://proppyjs.com

GitHub: https://github.com/fahad19/pr…

GitHub Stars: 856

ProppyJS 是一个很小的库,用于组合道具,它附带了各种集成包,让您能够自在地应用它风行的渲染库。

咱们的想法是首先将 Component 的行为表白为 props,而后应用 Proppy 的雷同 API 将其连贯到您的 Component(能够是 React,Vue.js 或 Preact)。

API 还容许您拜访其余应用程序范畴的依赖项(如应用 Redux 的商店),以不便组件树中的任何地位。

Light Blue Vue Admin

vue 后盾展现模板

网址: https://flatlogic.com/templat…

GitHub: https://github.com/flatlogic/…

GitHub Stars: 79

事例: https://demo.flatlogic.com/li…

文档: https://demo.flatlogic.com/li…

模板是用 Vue CLIBootstrap 4构建的。从演示中能够看到,这个模板有一组十分根本的页面: 排版、地图、图表、聊天界面等。如果咱们须要一个扩大的模板,能够看看 Light Blue Vue Full,它有 60 多个组件,无 jquery,有两个色彩主题。

Vue API Query

为 REST API 构建申请

GitHub: https://github.com/robsonteno…
GitHub Stars: 1.1k

对于这个我的项目没什么好说的。它所做的与形容行中所写的齐全一样: 它帮忙咱们构建 REST API 的申请。

Vue Grid Layout

Vue 的网格布局

Website: https://jbaysolutions.github….
GitHub: https://github.com/jbaysoluti…
GitHub Stars: 3.1k

所有网格相干问题的简略解决方案。它有动态的、可调整大小的和可拖动的小部件。还是响应和布局能够复原和序列化。如果还须要再增加一个小部件,则不用从新构建所有网格。

Vue Content Loader

创立一个占位符加载

Website: http://danilowoz.com/create-v…
GitHub: https://github.com/egoist/vue…
GitHub Stars: 2k

当咱们开发网站或者 APP 时,遇到内容过多加载速度慢时,会导致用户关上页面有大量空白页,vue-content-loader正是解决这个问题的一个组件,使加载内容之前生成一个 dom 模板,进步用户体验。

Echarts with Vue2.0

数据可视化

Website: https://simonzhangiter.github…
GitHub: https://github.com/SimonZhang…
GitHub Stars: 1.3k

在图片中,咱们能够看到十分丑陋的图表。这个我的项目使任何数据都更具可读性,更容易了解和解释。它容许咱们在任何数据集中轻松地检测趋势和模式。

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

Vue.js Modal

高度可定制的模态框

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

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

Vuesax

框架组件

Website: https://lusaxweb.github.io/vu…
GitHub: https://github.com/lusaxweb/v…
GitHub Stars: 3.7k

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

Vue2 Animate

vue2.0 —应用animate.css 构建我的项目和创立组件

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

这个库是跨浏览器的,咱们能够抉择从 5 种类型的动画: rotateslidefadebouncezoom。在网站上有一个演示。动画的默认持续时间是 1 秒,然而咱们能够自定义该参数。

Vuetensils

Vue.js 的工具集

Website: https://vuetensils.stegosourc…
GitHub: https://github.com/stegosourc…
GitHub Stars: 111

这个 UI 库有一个规范的性能,然而最酷的是它没有额定的款式。你能够让设计尽可能的个性化,利用所有的需要。只需编写须要的款式,将其增加到我的项目中,并蕴含须要的尽可能多的组件。

人才们的【三连】就是小智一直分享的最大能源,如果本篇博客有任何谬误和倡议,欢送人才们留言,最初,谢谢大家的观看。


编辑中可能存在的 bug 没法实时晓得,预先为了解决这些 bug, 花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文:

https://flatlogic.com/blog/ne…
https://flatlogic.com/blog/ne…


交换

文章每周继续更新,能够微信搜寻 【大迁世界】 第一工夫浏览,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,欢送 Star。

正文完
 0