盘点15个前端开源项目,yyds!

news2024/10/7 8:25:03

目录

    • 1、vue-color-avatar
    • 2、Reader
    • 3、Ant Design
    • 4、小游戏2048(Vue版)
    • 5、跳一跳
    • 6、lifeRestart(人生重开模拟器)
    • 7、GOVIEW
    • 8、vlife
    • 9、网易云音乐 API
    • 10、饿了么
    • 11、QQ音乐 API
    • 12、ChatGPT API
    • 13、Node.js 最佳实践
    • 14、Awesome Node.js
    • 15、Amis

1、vue-color-avatar

开源地址:https://github.com/Codennnn/vue-color-avatar

在线体验:https://vue-color-avatar.vercel.app

一个纯前端实现的头像生成网站。这是一款矢量风格头像的生成器,你可以搭配不同的素材组件,生成自己的个性化头像。
在这里插入图片描述
相关功能:

  • 可视化组件配置栏
  • 随机生成头像,有一定概率触发彩蛋
  • 撤销/还原更改
  • 国际化多语言
  • 批量生成多个头像

2、Reader

开源地址:https://github.com/hectorqin/reader

Reader 是一个前端基于 Vue.js + Element 的阅读工具。

其支持书架管理、搜索、书海、看书、换源、翻页方式、手势支持、自定义主题、自定义样式、WebDAV同步、文字替换过滤、听书、用户配置备份恢复、漫画、音频、书源失效检测、导入本地TXT、EPUB、UMD格式的书籍、书籍分组、RSS订阅、定时更新书架、并发搜书、本地书仓等功能。
在这里插入图片描述

3、Ant Design

开源地址:https://github.com/ant-design/ant-design
在这里插入图片描述

Ant Design 是一套企业级 UI 设计语言和 React 组件库。其具有以下特性:

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 React 组件。 使用 TypeScript
  • 开发,提供完整的类型定义文件。
  • 全链路开发和设计工具体系。
  • 数十个国际化语言支持。
  • 深入每个细节的主题定制能力。

4、小游戏2048(Vue版)

开源地址:https://gitee.com/lblbc/game_2048

在线体验:https://lblbc.cn/redirect/game_2048
在这里插入图片描述

2048游戏规则:

一共16个单元格,初始时由2或者4构成。

1、手指向一个方向滑动,所有格子会向那个方向运动。

2、相同数字的两个格子,相遇时数字会相加。

3、每次滑动时,空白处会随机出现一个数字。

4、当所有单元格都不可移动时,游戏结束;当界面中最大数字是2048时,游戏胜利。

5、跳一跳

开源地址:https://gitee.com/fwjzzz/Jump

在线地址:https://fwjzzz.gitee.io/jump/

2017年12月28日,微信更新的 6.6.1 版本开放了小游戏,微信启动页面还重点推荐了小游戏「跳一跳」。曾经一时间火遍朋友圈,2018年5月,研究公司QuestMobile,发布了微信小游戏《跳一跳》的数据,这款只有4MB大小的游戏截至2018年3月份已经积累了3.9亿玩家。

作者 奶油小泡芙 基于Three.js让经典重现「网页版跳一跳」,长按鼠标蓄力、放手,方块就会从一个盒子跳到另一个盒子「使用鼠标又是另一番体验,快去试试吧」。然而就是这个小动作,让你一旦开始就魔性地停不下来。

6、lifeRestart(人生重开模拟器)

开源地址:https://github.com/VickScarlet/lifeRestart

在线体验:https://liferestart.syaro.io/public/index.html
在这里插入图片描述
说到在线文字游戏就不得不提到,前两年特别火的一款开源游戏「人生重开模拟器」。

游戏里,玩家只需在开局时选天赋、分配初始属性,后面就是看岁月如白驹过隙,转眼就过完了这一生,不满意的话可以点击 再次重开 即刻开启新的人生。该游戏凭借诙谐幽默的文案,和出乎意料的结局,风靡一时。现在除了上述的经典模式玩法,还新增了名人模式,体验名人的一生。

7、GOVIEW

开源地址:https://gitee.com/dromara/go-view
在这里插入图片描述
GoView 是一个使用 Vue3 搭建的低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可完成业务需求。它的技术栈为:Vue3 + TypeScript4 + Vite2 + NaiveUI + ECharts5 + Axios + Pinia2 + PlopJS。

8、vlife

开源地址:https://github.com/wwwlike/vlife
在这里插入图片描述
企业级低代码快速开发平台,包含页面可视化配置、自定义表单、自定义报表、权限管理脚手架应用、前后端代码自动生成;主要特点是低代码开发,可实现复杂CRUD功能仅编写数据模型就能完成前后端开发。

9、网易云音乐 API

开源地址:https://github.com/Binaryify/NeteaseCloudMusicApi
在这里插入图片描述
一个基于 Node.js 的网易云音乐 API 服务。通过该项目,开发者可以方便地对网易云音乐进行各种操作,例如搜索歌曲、获取歌曲信息和评论、获取用户信息和播放列表等等。该项目提供了完整的文档供开发者参考,提供了超过250个接口。

10、饿了么

开源地址:https://github.com/bailicangdu/node-elm
在这里插入图片描述

一个基于 Node.js + MongoDB + Express + Mongoose + Vue + Element UI 的前后端分离的 Web 应用项目,是一个仿照饿了么的外卖点餐系统。整个项目分为两部分:前台项目接口、后台管理接口,共60多个。涉及登陆、注册、添加商品、商品展示、筛选排序、购物车、下单、用户中心等,构成一个完整的流程。

11、QQ音乐 API

开源地址:https://github.com/jsososo/QQMusicApi
在这里插入图片描述

基于 Express + Axios 的 QQ音乐接口 nodejs 版,开发者可以方便地对 QQ 音乐进行各种操作,例如搜索歌曲、获取歌曲信息和评论、获取用户信息和播放列表等。

12、ChatGPT API

一个基于 OpenAI 的 ChatGPT 生成式对话模型的 Web API。该项目使用 TypeScript 和 Express.js 构建。通过该项目,开发者可以快速地搭建自己的聊天机器人,以及实现其他基于 ChatGPT 的自然语言处理应用。
在这里插入图片描述
开源地址:https://github.com/transitive-b

13、Node.js 最佳实践

开源地址:https://github.com/goldbergyoni/nodebestpractices

Node.js 最佳实践指南,旨在帮助开发者编写更加健壮、安全和易于维护的 Node.js 应用程序。它提供了一系列的最佳实践、原则和代码示例,涵盖了从工程结构、代码组织、错误处理和日志记录等方面的内容。

该项目通过将最佳实践分类为 8 个模块,为开发者提供了一个全面的指南,帮助编写高质量的 Node.js 代码。这些模块包括:

  • 项目结构实践
  • 异常处理实践
  • 编码规范实践
  • 测试和总体质量实践
  • 进入生产实践
  • 安全实践
  • 性能实践
  • Docker实践
    在这里插入图片描述

14、Awesome Node.js

开源地址:https://github.com/sindresorhus/awesome-nodejs
在这里插入图片描述

一个开源的收录 Node.js 生态系统各种资源的项目,其中包括了 Node.js 框架、库、工具、文档和文章等各个方面,是一个非常受欢迎和权威的 Node.js 资源收集项目。

15、Amis

开源地址:https://github.com/baidu/amis
在这里插入图片描述

Amis 是百度开源的一个前端低代码框架,通过 JSON 配置就能生成各种后台页面,内置 100+ 种 UI 组件,能够满足各种页面组件展现的需求,极大减少开发成本,甚至可以不需要了解前端。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1089607.html

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

相关文章

云计算革命:多云管理与混合云的实践指南

文章目录 云计算的演进多云管理的优势1. 降低风险2. 提高性能3. 降低成本4. 提高安全性 实践指南1. 选择适当的云提供商2. 使用云管理平台3. 实施一致的安全策略4. 数据管理和迁移5. 自动化和编排 混合云的实践1. 私有云和本地数据中心2. 数据一致性3. 安全性和合规性4. 负载均…

IDEA启动报错Failed to create JVM. JVM path的解决办法

今天启动IDEA时IDEA报错,提示如下。 if you already hava a JDK installed, define a JAVA_HOME variable in Computer > Systen Properties > System Settings > Environment Variables.Failed to create JVM. JVM path:D:\ideaIU2023.2.3\IntelliJ IDE…

表单页面风格如何选择?弹窗 or 抽屉 or 页面?

一、类型介绍 在 PC 端项目中,用户触发了某个操作,当需要向用户展示新的内容时,有很多交互方式,弹窗、抽屉、页面就是其中典型的3种。下面来分析下3种交互方式的优势、劣势和使用场景。 1.1 弹窗 定义:分为模态和非模态对话框2种,常用的为模态对话框。 优势:在不离开…

AI项目十六:YOLOP 训练+测试+模型评估

若该文为原创文章,转载请注明原文出处。 通过正点原子的ATK-3568了解到了YOLOP,这里记录下训练及测试及在onnxruntime部署的过程。 步骤:训练->测试->转成onnx->onnxruntime部署测试 一、前言 YOLOP是华中科技大学研究团队在2021年…

2023软件测试面试题(亲身经历)

在职,5年测试经验,坐标广州,有点想666。于是进行了几场线上面试… 1、python有哪些数据类型 数字型:int/float/bool/complex 字符串:str 列表:list 元组:tuple 字典:dict 集合&…

云原生应用安全性:解锁云上数据的保护之道

文章目录 云原生应用的崛起云原生应用安全性挑战1. **容器安全性**:容器技术如Docker和Kubernetes已成为云原生应用的核心组成部分。容器的安全性变得至关重要,以防止恶意容器的运行和敏感数据泄漏。2. **微服务安全性**:微服务架构引入了多个…

从零开始使用webpack搭建一个react项目

先做一个正常编译es6语法的webpack demo 1. 初始化package.json文件 npm init一路enter下去 2. 添加插件 {"name": "demo","version": "1.0.0","description": "","main": "index.js",&q…

Springboot利用CompletableFuture异步执行线程(有回调和无回调)

目录 背景 实现 一、异步线程配置类 二、自定义异步异常统一处理类 三、实现调用异步(无回调-runAsync()) 四、实现调用异步(有回调-supplyAsync()) 五、异步执行错误异常示例 背景 项目中总会有需要异步执行来避免浪费…

Windows中将tomcat以服务的形式安装,然后在服务进行启动管理

Windows中将tomcat以服务的形式安装,然后在服务进行启动管理 第一步: 在已经安装好的tomcat的bin目录下: 输入cmd,进入命令窗口 安装服务: 输入如下命令,最后是你的服务名,避免中文和特殊字符 service.…

Redis数据类型及命令

目录 (一)通用命令(二)String类型(三)Hash类型(四)List类型(五)Set类型(六)SortedSet类型 在redis命令行查询redis通用命令&#xff1…

如何使用摩尔信使MThings连接网络设备

帽子: 摩尔信使MThings支持Modbus-TCP、Modbus-RTU Over TCP、Modbus-TCP Over UDP、Modbus-RTU Over UDP。 TCP链接中,摩尔信使MThings支持灵活的连接方式,主机可作为客户端也可以作为服务端,同时支持模拟从机以客户端方式向远…

1600*C. Add One(数位DP找规律)

Problem - 1513C - Codeforces 解析: 考虑DP,DP[ i ] 为从 0 开始执行 i 次操作,此时数字的位数。 我们发现当一个9再操作一次就会变成1和0,并且相邻的大部分长度都不会变化,0会影响10次操作之后的位数,1会…

开源自动化测试框架优缺点对比

1. Robot Framework Robot Framework(RF)是用于验收测试和验收测试驱动开发(ATDD)的自动化测试框架。 基于 Python 编写,但也可以在 Jython(Java)和 IronPython(.NET) 上…

网页版微信CRM系统,让微信管理更方便!

微信,作为现在热门的社交软件之一,已经成为商家和消费者交流的主要渠道。但对于客服这类人群来说,一个得管理多个微信号,耗费了他们大量时间精力。 因此,微信CRM 系统应运而生。它可以将多个微信聚合在一个界面中&…

PPO算法逐行代码详解

前言:本文会从理论部分、代码部分、实践部分三方面进行PPO算法的介绍。其中理论部分会介绍PPO算法的推导流程,代码部分会给出PPO算法的各部分的代码以及简略介绍,实践部分则会通过debug代码调试的方式从头到尾的带大家看清楚应用PPO算法在car…

三、静态路由实验

拓扑图: 两个路由器分了三个网段出来,首先对两台PC机进行配置 进入R1路由器对两边链路进行ip配置 对AR2进行相同的配置,然后我们查看R1的路由表,里面有一些直连的信息。 三个网段的设备现在可以互通,我们要实现跨网段…

[数据结构]——单链表超详细总结

带你走进链表的世界 目录:一、线性表的概念二、顺序表三、链表3.1 链表的概念3.2 链表的分类3.3 无头单向非循环链表的实现3.4 带头双向循环链表的实现 四、顺序表和链表的区别和联系 目录: 链表是个优秀的结构,没有容量概念,可以…

Python接口测试 requests.post方法中data与json参数区别

引言 requests.post主要参数是data与json,这两者使用是有区别的,下面我详情的介绍一下使用方法。 Requests参数 1. 先可以看一下requests的源码: 1 2 3 4 5 6 7 8 9 10 11 12 13 def post(url, dataNone, jsonNone, **kwargs): r&quo…

STM32CUBEMX_DMA串口空闲中断接收+接收发送缓冲区

STM32CUBEMX_DMA串口空闲中断接收接收发送缓冲区 前言: 我了解的串口接收指令的方式有:在这里插入图片描述 1、接收数据中断特定帧尾 2、接收数据中断空闲中断 3、DMA接收空闲中断 我最推荐第三种,尤其是数据量比较大且频繁的时候 串口配置 …

Vmware Linux虚拟机安装教程(Centos版)

文章目录 1.Vmware-workstation安装软件2.双击下载的安装包开始安装3.打开VMware-workstation,输入密钥4.Centos7.6安装软件5.新建虚拟机6.为虚拟机配置映像文件7.开启虚拟机,配置环境7.1 Install Centos 77.2 选择简体中文字体7.3 软件选择7.4 安装位置…