16 个优秀的 Vue 开源项目

news/2024/4/24 20:31:16/

 

为什么我们要关注Vue

 

Vue是一个用于构建用户界面的JavaScript框架。值得关注的是,它在没有谷歌和Facebook的支持下获得了大量的人气。

 

Vue是结合react和angular的最好的方法,并且拥有一个有凝聚力的,活跃的,能够应对开发问题的大型社区。相同的社区能够不断地提出新的方法去解决常规的问题。随着贡献量的增加,可用的数据以及库的数量也会随之增加。

 

使用Vue的益处

 

框架很小。这个框架的大小是18- 21KB ;

 

Vue支持基于组件的方法来构建Web应用程序;

 

文档详细。开发人员总是喜欢使用带有详细文档的框架,因为他们编写第一个应用程序总是很容易;

 

通俗易懂。由于Vue. js 结构简单,用户可以很容易地将其添加到Web项目中。它有一个定义良好的体系结构来保存您的数据。生命周期法与定制法分离;

 

集成简单。你可以简单地通过CDN添加Vue. js –无需设置节点和npm开始使用Vue. js 。你也可以使用它作为一个伟大的jQuery替代品;

 

工具完善。Vue. js 就有了。VueCLI 允许你启动新项目,包括路由、状态存储、Linting、单元测试、CSS预处理器、Typescript、PWA等——它们都是内置的。此外,VueCLI 还提供了管理项目的UI。

 

使用Vue的项目

 

如果你想创建轻量级且易于修复的应用程序,那么Vue. js 是一个不错的选择。

 

学习曲线相当低,允许在短时间内掌握框架,然后继续进行应用程序开发。我们建议在以下情况下使用Vue:

 

如果您想构建单页应用程序或渐进式WebApp (你可以使用nuxt. js 框架);

 

你想让你的团队学习新的技术,Vue是一个很好的选择;

 

快速构建MVP;

 

你想建立一个SEO友好的应用程序;

 

你有一个紧张的预算和希望迅速地测试的想法。

 

Vue的受欢迎度

 

谈到Vue. js 的受欢迎程度,在#vue . js 中的StackOverflow内有超过57, 000 个问题和大约15, 000个npm包。与其他框架相比,Vue. js 仍然排在第三位,但在没有Facebook和Google支持的情况下仍然拥有非常好的社区。

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

开放源码项目的评价标准

 

文档。任何好的项目都应该有全面的文档;

 

如何很好地描述提交的规则。如果开源项目想要增加贡献者的数量,这是必不可少的;

 

如何很好地组织与问题的工作。处理问题的工作应组织良好,以便操作人员知道首先解决哪些问题;

 

项目是否有路线图?路线图帮助贡献者选择他们将首先开发的特性;

Github上的星星数。这一标准在一定程度上反映了项目的质量;

 

成熟度。分析项目开发并试图决定应该使用什么作为工具来获得结果,需要小心选择尚未成熟或没有十足把握的工具;

 

bug或者漏洞。如果你需要帮助,可能没有大型的知识库或社区。

 

在我们的选择中,我们根据功能目的划分项目:

 

·CMS和生成器;

·UI组件;

·应用程序;

·工具包;

·开发者工具。

 

Vue开源项目

 

我们列出了你应该了解的最重要的工具和库,并最终在Vue. js 项目中使用和贡献。与许多其他文章只列出UI组件库不同,我们在Vue生态系统中包含了其他库和插件。

 

我们的选择是基于他们的有用性、有效性、文档、想法和贡献指南。

 

 

01 CMSand Generators

 

页面工具包

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

Pagekit 是一个开源的CMS,在Vue. js 和Symphony框架的帮助下构建。CMS是模块化的,所以你可以逐步扩展功能。Pagekit是在MIT许可证下发布的,因此它可以自由地修改、共享和重新发布,没有任何限制。

 

该产品具有CMS的所有主要和高级功能:

 

·可定制的分析仪表板与网站性能;

·网站内容编辑页面;

·内置博客;

·HTML和Markdown 编辑器;

·文件管理器;

·用户角色管理。

 

还有一些东西和特点对开发者特别有用。该产品使用简单的ORM、模块化架构和包管理构建。还有一个内置的调试工具栏,可以帮助开发人员监视性能、路由、数据库查询和调试内部系统事件、扩展甚至可以添加自己的功能。另外,也可以使用CLI执行系统更新、安装和卸载扩展和主题,以及直接从终端清除缓存。

 

该产品有一个强大的贡献指南,团队欢迎人们来修复错误,翻译或扩展CMS的功能。社区没有那么大,但非常发达,热心帮助新人。

 

因此,这是一个非常强大的产品,具有非常全面的文档和透明的贡献指南。开启开源世界之路的绝佳选择。

 

 

02 Vuepress

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

VuePress 是一个由Vue. js 作者EvanYou 创建的基于Vue的静态站点生成器。在VuePress 帮助下,网站创建使用VueRouter 、Vue和webpack 。最初,该产品是作为编写技术文档的工具而创建的,但现在它是一个小型、紧凑、功能强大的headless CMS 。在VuePress 中你用Markdown 写内容,然后转换成预渲染的静态HTML文件。

 

该项目有一个组织良好的捐款指南,工作流程透明。它还有很好的问题管理功能。社区有超过300个活跃贡献者,他们可以支持你。这是你开始为开源项目做贡献的好选择。

 

 

03 Vue店面

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Vuestorefront是一款面向电子商务的PWA,可以连接到几乎任何电子商务后端:它使用了headless 架构。这包括流行的BigCommerce 平台、Magento、Shopware 等。VueStorefront 的一些优势包括移动优先的方法、服务器端渲染(有利于SEO)和离线模式。

 

该产品拥有一个发达的社区:Slack中约有2000名开发者和180多名活跃贡献者。这是特别有价值的,因为团队有一个清晰的路线图,所以你作为一个贡献者可以选择你可以做的任务。总之,这是一个非常有趣的,支持和需要在上面花时间的产品。

 

 

04 Vuegg

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Vuegg 允许您将组件直接拖放到可视化编辑器中,并根据你的选择移动它们的大小,从而构建Vue. js 项目。这个项目的目的是合并设计和原型到一个单一的过程。

 

显著特征:

 

·通过拖放组件和移动/调整它们的大小来模拟/还原它们;

·支持标准鼠标和键盘组合;

·响应式预览(手机、平板电脑、网络);

·一组基本的HTML5元素;

·材料设计组件(vue- mdc - adapter );

·Vuejs 源代码生成(download . zip )。

 

这个项目有一个清晰的路线图,你可以直接在Github上看到。由于该项目是相当新的,仍在进行中的工作没有贡献指南,但你可以自由的打开任何问题和公关。

 

 

05 Gridsome

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Gridsome 与VuePress有许多相似之处,但它采用了一种不同的非常强大的方法来处理数据源。它允许你连接并使用应用中的许多不同类型的数据,然后将这些数据统一到一个GraphQL 层中。基本上,Gridsome 的前端功能用Vue,数据管理用GraphQL 。

 

工作方式可以概括为以下三个步骤:

 

你提供Markdown 、JSON、YAML或CVS数据格式的内容,或者从WordPress或Drupal等CMS导入内容;

 

内容转化为一个GraphQL 层,提供集中的数据管理;

然后用这些数据用Vue构建你的应用。

 

在开发方面,文档有一个清晰的路线图、一个描述良好的更改日志和一个贡献指南。投稿是一个不错的选择。

 

 

06 UI组件

 

Vuetify

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Vuetify 根据MaterialDesign 规范提供了大量精心制作的组件(80 +)。Vueti fy 结合了Vue. js 和Material的所有优点。该框架是与RTL和VueCLI - 3 兼容。Vuetify 的所有组件都有很好的记录,也有清晰的示例。它与Vue的服务器端渲染(SSR)一起工作。Vuetify 支持所有现代网络浏览器——甚至是IE11 和Safari9 +(使用多功能填充)。它还提供了现成的项目脚手架,这样您就可以用一个命令开始构建您的Vue. js 应用程序。

 

它提供了一组基于材料设计的组件,例如:

·按钮;

·投入;

·卡片;

·表,

·清单。

 

Vuetify 背后有一个充满活力的社区,有超过500个贡献者,他们创建了许多Vuetify 插件。它具有成为一个好的开源的所有主要组件:广泛的文档、贡献指南、问题管理。但在我们看来,这很难做出贡献,因为社区已经很大了。

 

07 Buefy

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Buefy基于Bulma为Vue. js 提供了轻量级的UI组件。Buefy有两个核心原则:让事情简单化,轻量化。这也解释了为什么它唯一的依赖是Vue和Bulma 。虽然它只有40多个组件,但它为你提供了随时可用的移动优先和响应式的UI组件。

 

特点:

·支持MaterialDesign 图标和FontAwesome ;

·非常轻便,除了Vue& Bu lma 之外没有内部依赖;

·约88KB min + gzip ;

·语义代码输出。

 

 

08 VueMaterial 

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

VUEMaterial简单,轻巧,完全按照GoogleMaterial Design规范建造。VUE材料提供超过56个组件来构建不同类型的布局。一个伟大的事情是材料设计框架有真正彻底的文档。该框架非常轻量级,包含完整的组件,完全符合GoogleMaterial Design准则。这种设计适合每一个屏幕,并支持每一个现代浏览器。

 

路线图、贡献指南、好的文档和更新日志都在这里。对于喜欢UI项目的开发者来说,是一个不错的选择。

 

 

09 应用


 

Koel

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Koel是一个个人音乐流媒体服务,你可以根据你的需要定制。客户端用Vue编写,后端用Laravel编写。koel以web开发者为目标,采用了一些更现代化的web技术,比如flexbox 、音频和拖放api等等。

 

这个项目在Github上相当受欢迎,有52个贡献者。不幸的是,没有详细的贡献指南,但是作者在Github上写道,在你提交任何东西之前,你需要打开一个问题。还有一个通过Opencollective 赞助该项目的选项。

 

我们喜欢这个项目背后的想法,使一个流媒体服务,将由社区开发。因此,如果你热爱音乐,想要提高自己的Vue技能,投稿会是一个不错的选择。

 

 

10 Eagle.js

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Eagle. js 是使用Vue构建的强大、灵活、独特的幻灯片显示系统。它允许你在演示文稿中创建易于重用的组件、幻灯片和样式。它还支持动画,主题,和互动小部件,这是伟大的网页演示。

 

使用这个库可以做的最重要的事情之一是将幻灯片放在单独的文件中,然后在其他幻灯片显示中重用它。你还可以将特定幻灯片显示的幻灯片导入另一个幻灯片。创建者还提供了几个模板,可以轻松地开始开发。

 

这个项目有一个贡献指南,里面有你可以提供帮助的想法。我们认为这是一个值得花时间做的好项目:它真的帮助了很多人做演示。此外,在Eagle的帮助下,开始学习Vue很容易。

 

 

11 工具包

 

Nuxt.js

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Nuxt是一个用于构建通用应用程序的简单而直接的框架:服务器呈现的应用、单页应用、渐进式Web应用,或者只是将其用作静态站点生成器。它也是模块化的,所以你可以只使用你的apage所需要的模块简而言之,Nu xt 将您从构建和优化您的apage的工作中拯救出来Nuxt. js 具有模块化的架构,有50多个模块可供选择。

 

特点:

·热代码重载;

·服务器端渲染或单页应用程序或静态生成,您选择;

·使用nuxt. config . js 文件可配置;

·每个页面的代码拆分;

·用layouts/目录定制布局;

·只加载关键的CSS(页面级)。

Nuxt成为Vue开发不可分割的一部分,有很多贡献者和广泛的社区。我们会选择这个工具的贡献,知道社区将帮助你的技能发展,并教一些新的东西。

 

 

12 Quasar

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Quasar是一个通用的、Vue支持的框架,允许您使用相同的代码库为不同平台编写应用程序:SPA、PWA、SSR应用程序、混合移动应用程序或多平台桌面应用程序。类星体有多达81个组件。

 

有一个好的文档和大量的组件设计的性能和响应。Quasar在默认情况下集成了最佳实践(HTML/ CSS / JS 缩小、缓存破坏、树摇动、源映射、延迟加载的代码拆分、ES6 传输、代码链接、可访问性),因此你可以主要关注应用的功能。它还提供了一个cli工具,用于轻松构建新项目的支架。

 

该框架有一个很棒的社区,支持聊天和论坛,加上明显的贡献指南。此外,你可以通过捐钱来支持该工具。

 

 

13 BootstrapVue

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

引导Vue是一个基于引导库的UI工具包。它简单地用Vue代码替换常规引导组件中的JavaScript。使用BootstrapVue,你可以使用Vue.js和世界上最流行的前端CSS库-Bootstrapv4在Web上构建响应性强、移动第一和ARIA可访问的项目。它还可以轻松地与Nuxt.js集成。

 

文档是广泛的,再加上社区的支持是强大的不和谐,使它成为一个安全的选择,有人开始一个项目,并作出贡献。

 

 

14 开发人员工具

 

Statusfy

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Statusfy 是一个完全开源的状态页面系统。Statusfy 站点是一个Web应用程序,创建于Eleventy 、Vue、Nuxt. js 和TailwindCSS 之上。

 

这很酷,因为:

 

·Markdown 支持;

·它是一个渐进式网络应用程序;

·多语言支持;

·轻松定制。

 

在社区管理和支持方面,这款产品有社区聊天、众多教程、提示、更新和博客。它也有一个广泛的文件和贡献指南。

 

我们会推荐这个项目的贡献,因为它是一个真正伟大的工具,使开发人员的生活真的很容易。此外,您还将熟悉Vue周围的所有主要技术。

 

 

15 Cachet

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

Cachet是一个强大的开源状态页面系统,用Vue和Bootstrap制作。它内置了10种语言。Cachet与一个简单(但功能强大)的JSONAPI 捆绑在一起。此外,通过Cachet,你可以提前安排活动。在仪表板中,你可以设置指标——一种测量某些东西的方法,无论是正常运行时间、错误率还是完全随机的东西。

 

Slack里有一个相当大的社区,贡献者非常活跃。开始为开源社区做贡献是一个不错的选择——活跃的社区,中等规模的项目,好主意。

 

 

16 VeeValidate

 

640?wx_fmt=jpeg&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1

 

VeeValidate 是一个基于模板的Vue. js 验证框架,允许你验证输入和显示错误。

 

由于它是基于模板的,你只需要为每个输入指定当值更改时应该使用哪种验证器。错误将自动生成的40+地区支持。很多规则都是开箱即用的。

 

特点:

 

·熟悉且易于设置的基于模板的验证;

·i18n支持和错误消息在40+地区;

·异步和自定义规则支持;

·用TypeScript编写;

·没有依赖。

 

VeeValidate 处理表单验证的主要痛点,并以最灵活的方式处理它们:

 

·能够为你的用户设计复杂的用户体验;

·大多数常见的验证是内置的;

·跨领域验证;

·用于增强窗体的可访问性和样式的实用程序;

·本地化是内置到核心。

 

团队欢迎每个人为项目做出贡献,并有一个很好的文档和贡献指南。它也有一些伟大的例子和伟大的社区.

 

 

 

 

 

 

 


http://www.ppmy.cn/news/46856.html

相关文章

2023/4/13总结

最小生成树 一、Prim算法 1.prim算法也被称为“加点法”,因为该算法是先从任意一顶点出发不断的选择目前距离最近且未被选择的点加入到已选的集合中,直到所有的点都被选到。(和最短路径中的Dijkstra算法很像) 2.prim算法的实现…

文件操作【下篇】

文章目录 🗃️5.文件的随机读写📁5.1. fseek📁5.2. ftell📁5.3. rewind 🗃️6.文本文件和二进制文件🗃️7.文件读取结束的判定📁7.1. 被错误使用的 feof 🗃️8.文件缓冲区 &#x1f…

折叠屏市场起风,华为、OPPO“你追我赶”

配图来自Canva可画 现如今,智能手机已经成为了人们生活中不可或缺的重要工具,无论是出行,还是社交,亦或是支付,只需要一部智能手机就可以通通搞定。因此,在消费者多样化需求的助推下,智能手机行…

研读Rust圣经解析——Rust learn-3(变量与可变性,数据类型)

研读Rust圣经解析——Rust learn-3(变量与可变性,数据类型) 变量|常量与可变性变量声明案例为什么不可变变量可变(mut关键字)变量可变(覆盖) 常量声明 数据类型标量类型整型整型字面值整型溢出问…

Go分布式爬虫笔记(二十二)

文章目录 22 辅助任务管理:任务优先级、去重与失败处理设置爬虫最大深度避免请求重复设置优先队列设置随机User-Agent失败处理 22 辅助任务管理:任务优先级、去重与失败处理 设置爬虫最大深度 目的: 防止访问陷入到死循环控制爬取的有效链接的数量 最…

ChatGPT实战100例 - (09) Python工具类库终结者

文章目录 ChatGPT实战100例 - (09) Python工具类库终结者一、需求与思路二、时间工具三、扩充工具四、编写测试五、 总结 ChatGPT实战100例 - (09) Python工具类库终结者 一、需求与思路 自从用了ChatGPT,再也不用满大街找工具类了。 需要啥工具,咱用C…

数据结构入门(C语言版)二叉树概念及结构(入门)

二叉树概念及结构(入门) 树的概念及结构1.树的概念及结构1.1 树的概念1.2 树的相关知识1.3 树的结构体表示1.4 树的实际运用 2.二叉树概念及结构2.1 二叉树的概念2.2 现实中的二叉树2.3 特殊的二叉树2.4 二叉树的性质2.5 二叉树的存储结构 结语 树的概念…

根据 cadence 设计图学习硬件知识 day01了解腾锐 D2000芯片

1. 首先了解 腾锐 D2000 1.介绍 腾锐D2000 芯片 D2000芯片集成8个飞腾自主研发的新一代高性能处理器内核FTC663,采用乱序四发射超标量流水线,兼容64位ARMV8指令集并支持ARM64和ARM32两种执行模式,支持单精度、双精度浮点运算指令和ASIMD处…

设计模式 -- 门面模式

前言 月是一轮明镜,晶莹剔透,代表着一张白纸(啥也不懂) 央是一片海洋,海乃百川,代表着一块海绵(吸纳万物) 泽是一柄利剑,千锤百炼,代表着千百锤炼(输入输出) 月央泽,学习的一种过程,从白纸->吸收各种知识->不断输入输出变成自己的内容 希望大家一起坚持这个过程,也同…

100种思维模型之非共识思维模型-48

某一件事或者某一个环境当中,绝大多数人往右走,而你 发现真正的路是左边 的时候,该怎么选择? 往左边走,做非共识但正确的事,因为一旦你的真的是对的,你将会得到一切。 非共识思维模型是一个提…

集群和分布式

本文以即时通讯软件(IM)为例,介绍单机、集群、分布式的区别,以及它们各自的优缺点。 假设现在开发一款IM,刚开始业务比较简单,用户量也较少,我们将服务部署在一台单机服务器上足矣。软件开发过程…

std::regex正则表达式

std::match_results (匹配的结果存入其中) result[0]是完整的文本,result[1]是第一个分组匹配的数据。如果正则表达式有n个分组,match_results的size也就是n1个 This is a specialized allocator-aware container. It can only …

【FPGA实验4】举重比赛机制

举重比赛有三名裁判,当运动员将杠铃举起后,须有两名或两名以上裁判认可,方可判定试举成功,若用A、B、C分别代表三名裁判的意见输入,同意为1,否定为0;F为裁判结果输出,试举成功时F1,试…

逍遥自在学C语言 | 位运算符~的高级用法

前言 在上一篇文章中,我们介绍了^运算符的高级用法,本篇文章,我们将介绍~ 运算符的一些高级用法。 一、人物简介 第一位闪亮登场,有请今后会一直教我们C语言的老师 —— 自在。 第二位上场的是和我们一起学习的小白程序猿 ——…

Direct3D 12——计算着色器——计算着色器概念

计算着色器虽然是一种可编程的着色器,但Direct3D并没有将它直接归为渲染流水线中的一部分。虽然如此,但位于流水线之外的计算着色器却可以读写GPU资源。从本质上来说,计算着 色器能够使我们访问GPU来实现数据并行算法,而不必渲染出…

5.Spring Cloud (Hoxton.SR8) 实战笔记—项目中细节实现 约束 注意事项、模块难点总结

本文目录如下: 二、项目中细节实现 & 约束 & 注意事项判断字符串是否为空?入参 Num 字段转换为 num 的问题?通过 Java 获取时间 (Date类型) 并插入数据库?神坑: baseMapper.selectById(String str)之坑?AES 实现加密函数…

[Eigen中文文档] 切片和索引

专栏总目录 本文目录 概述基本的切片编译时的大小和步长倒序索引序列自定义索引列表 英文原文(Slicing and Indexing) 本文介绍了如何使用操作运算符operator()索引行和列的子集。该 API 在 Eigen 3.4 中引入。它支持 block API 提供的所有功能。特别是,它支持切片…

查询练习:条件加组筛选

查询 student 表中至少有 2 名男生的 class 。 -- 查看学生表信息 SELECT * FROM student; ---------------------------------------- | no | name | sex | birthday | class | ---------------------------------------- | 101 | 曾华 | 男 | 1977-09-01 | 95…

vue 动态组件

一见如故 // 一般配合<keep-alive>组件&#xff0c;避免反复重新渲染dom <keep-alive><component :is"com"></component> </keep-alive> <script> import Left from ./LeftComponent.vue import Right from ./RightComponent.v…

Ae:自动定向

Ae 菜单&#xff1a;图层/变换/自动定向 Auto-Orient 快捷键&#xff1a;Ctrl Alt O 自动定向 Auto-Orient是 Ae 图层中的一个附加的、隐藏实现&#xff08;不会在时间轴面板上更改属性的值&#xff09;的功能&#xff0c;它可以使得图层自动旋转或改变方向以朝向指定的运动路…