16 个优秀的 Vue 开源项目

news2024/12/22 20:03:54

 

为什么我们要关注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.coloradmin.cn/o/439595.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

消息队列如何保证消息的幂等性

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 文章目录 什么是幂等性什么是消息的幂等性为什么会出现消息幂等性问题该如何解决消息幂等性问题总结 在分布式系统中,消息队列…

【C++入门必备知识:命名空间与关键字】

【C入门必备知识:命名空间与关键字】 【命名空间】①.命名空间定义Ⅰ.正常定义命名空间Ⅱ.嵌套定义命名空间Ⅲ.合并命名空间 ②.命名空间的使用Ⅰ.命名空间名称及域作用限定符Ⅱ.using成员引入Ⅲ.using namespace名称全部引入 ③.注意事项 【C关键字(C98)】 【命名空…

Ubuntu系统安装docker、docker-compse

环境:Ubuntu 20.04.4 LTS (GNU/Linux 5.4.0-100-generic x86_64) 一、安装docker 1.卸载旧版本 ubuntu下自带了docker的库,不需要添加新的源。 但是ubuntu自带的docker版本太低,需要先卸载旧的再安装新的 sudo apt-get remove docker docke…

免费的语音转文字软件有哪些?推荐一款好用的

随着人工智能技术的不断发展,语音识别技术已经得到了广泛的应用。语音转文字软件是其中的一种应用,它能够将人们说出的话语自动转化为文字,从而方便人们进行文本处理、记录、存档等操作。在现实生活中,有很多人需要使用语音转文字…

Redis的哈希表是如何扩容的?

文章目录 一般面试回答哈希表结构字典数据结构解决哈希冲突扩容/缩容对字典的哈希表rehash步骤 渐进式rehash渐进式rehash步骤 相关问题 一般面试回答 redis 解决冲突的方法是使用链地址法,另外当容量不足的时候,则使用Rehash 进行扩容。 Rehash&#x…

96-Linux_UDP实现客户端和服务器端

UDP实现客户端和服务器端 一.udp实现客户端和服务器端的编程流程二.udp实现实现客户端和服务器端所用的接口1.socket2.sendto3.recvfrom 三.udp服务器端代码和客户端的代码1.服务器端2.客户端 一.udp实现客户端和服务器端的编程流程 udp提供无链接的,不可靠的,数据报服务; 二…

burp suite 插件编写-基础

文章目录 前言一、插件的官方文档二、Montoya API jar包结构三、HTTP 处理程序小结 四、代码示例 前言 burp插件入门。入门,我们大概有一个框架,心里不再有怎么做,为什么可以这么做的疑问。现在就要更具体的来回答“怎么做”这个问题。我们通…

基于C#编程建立泛型Vector数据类型及对应处理方法

目录 一、简介 二、方法 2.1 建立Vector类 2.2 Vector成员 2.3 Vector属性 2.4 Vector方法 2.4.1 构造函数 2.4.2 Vector元素操作方法 2.4.3 Vector 运算 三、调用方法 3.1 方法 3.1.1 Append 3.1.2 this[] 3.1.3 Insert 3.1.4 DelLen 3.1.5 FindNumber 3.1.6 …

PHP快速入门04-前后端数据交互与文件上传

文章目录 前言前后端数据交互与文件上传前后端数据交互 $_GET $_POST文件上传 总结 前言 本文已收录于PHP全栈系列专栏:PHP快速入门与实战 前后端数据交互与文件上传 前后端数据交互 $_GET $_POST 他们都是超全局变量。它们用于从HTTP请求中获取数据&#xff0…

除了学历,你更需要有能力

遥想当年,家里培养出一个大学生,是多荣耀的事!可现今却处于一个比较尴尬的状态。 为什么大学生贬值得这么厉害?其实大学生之所以会不值钱不外乎三大原因:量大、与企业需求不匹配、质量差。 高校扩招下,大…

OpenAI最新官方ChatGPT聊天插件接口《接入插件快速开始》全网最详细中英文实用指南和教程,助你零基础快速轻松掌握全新技术(二)(附源码)

Getting started 快速开始 前言Introduction 导言Plugin manifest 插件清单OpenAPI definition OpenAPI定义Running a plugin 运行插件Setup a local proxy of your public API 设置公共API的本地代理 Writing descriptions 书写描述Best practices Debugging 排除故障其它资料…

【Android】popup windows 的使用方式 和 遇到不显示的坑

背景 在项目开发过程中有一个需求就是点击一个问号icon 弹出相关提示信息在下面,那么就得对这个做适配了。 计划采用popupWindow 实现: 参考 实现 基本的套路就是写一个xml对应的布局,然后在java 层使用即可。 特别注意的是该xml布局要慎…

ubuntu输入法问题汇总

Xfce4桌面环境输入法 Ubuntu20.04、ubuntu21.04中安装xfce4桌面环境,自带中文输入法; 原生xubuntu20.04中文输入法问题解决办法: 更新语言支持失败的话,终端键入:sudo apt-get install cmake qt5-default qtcreator…

网络安全——传输层安全协议(3)

作者简介:一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭:低头赶路,敬事如仪 个人主页:网络豆的主页​​​​​​ 目录 前言 一.SSL密钥更改协议 二.SSL告警协议 关闭报警 错误报警 三.SSL协议安全性…

软件测试测试开发技能

从事软件测试许多年,想必很多人都有感到迷茫不知所措的时候,人生的十字路口有很多,该如何抉择呢?有人成功转型,QA、项目管理、配置管理。当然还有技术型,性能测试、自动化测试、测试开发,而想要…

爬虫JS逆向思路-hook钩子

网络上几千块都学不到的JS逆向思路这里全都有👏🏻👏🏻👏🏻 本系列持续更新中,三连关注不迷路👌🏻 干货满满不看后悔👍👍👍 &…

连续3天3场分享,KubeVela@KubeCon EU 2023 抢鲜看!

自从 2019 年 Open Application Model 诞生以来,KubeVela 已经经历了几十个版本的变化,并向现代应用程序交付先进功能的方向不断发展。最近,KubeVela 完成了向 CNCF 孵化项目的晋升,标志着社区的发展来到一个新的里程碑。今天&…

有了MySQL,为什么还要有NoSQL

🏆今日学习目标: 🍀MySQL和NoSQL的区别 ✅创作者:林在闪闪发光 ⏰预计时间:30分钟 🎉个人主页:林在闪闪发光的个人主页 🍁林在闪闪发光的个人社区,欢迎你的加入: 林在闪闪…

PYQT5学习笔记02——程序基本结构之面向对象版本

我们之前写的代码耦合性比较高,复用性不高,这是面向过程编程的缺点。我们可以把程序基本结构设计成面向对象的版本,把 设置控件这部分内容封装到一个类中。 比如这个是我们的窗口,红色的矩形是相同的菜单控件,既然是一…

研报精选230420

目录 【行业230420浙商证券】卫浴行业深度报告:智能卫浴新变局,国货崛起正当时 【行业230420平安证券】氢能全景图(上)制氢篇:商业模式起步,绿氢初试锋芒 【行业230420天风证券】建筑装饰行业深度研究&…