2023年, 前端路上的开源总结(最新更新)

简介: 2023年, 前端路上的开源总结(最新更新)

19年至今, 笔者利用空余时间陆陆续续做了一些开源项目, 大部分开源项目都是以实际价值为开源基础, 所以我觉得有必要做一个总结和复盘,在复盘的过程中希望也能对大家有所帮助.今后笔者的开源项目都会放在这篇文章中,如果想学习的可以收藏+交流.

1. 基于react实现的滑动验证码组件

image.png

github地址: github.com/MrXujiang/r…

技术分享:  从零开发一款轻量级滑动验证码插件(深度复盘)

其他:  支持npm安装或者umd方式引入

2. 基于vue3实现的滑动验证码组件

image.png

github地址: github.com/MrXujiang/v…

技术分享:  开发一款基于vue3的轻量级滑动验证码插件

其他:  支持npm安装或者umd方式引入

3. react-cropper-pro轻量级图片上传裁切组件

image.png

github地址: github.com/MrXujiang/r…

技术分享:  使用react-cropper-pro实现图片裁切压缩上传

其他:  支持npm安装或者umd方式引入

4. xijs 一款面向复杂业务场景的 js 类库

image.png

github地址: github.com/MrXujiang/x…

技术分享:  github.com/MrXujiang/x…

其他:  支持npm安装或者umd方式引入

5. blink 一款自定义的生成故障艺术动画的组件库

image.png

github地址: github.com/MrXujiang/b…

学习资料:  轻松使用纯css3打造有点意思的故障艺术(附React加强组件版)

那除此之外我也用 vite + vue3 + ts 从零手写了一个几何画板, 方便大家学习可视化和图形学,  这里给大家分享一下开源地址:

gitee.com/lowcode-chi…

这方面的技术文章大家可以参考我往期公众号的文章即可, 有问题也欢迎随时和我交流.

1. 基于indexedDB封装的轻量级缓存库

image.png

github地址: github.com/MrXujiang/x…

其他:  支持npm安装或者umd方式引入(npm用户名@alex_xu)

2. 基于localStorage封装的轻量级缓存库

image.png

github地址: github.com/MrXujiang/d…

其他:  支持npm安装或者umd方式引入

3. 基于node开发的免费图床服务器

image.png

github地址: github.com/MrXujiang/f…

其他:  支持本地部署, 远程测试服务器部署, 配置私有图床

4. 基于node的cms系统

image.png

github地址: github.com/MrXujiang/X…

其他:  基于该系统可定制自己的博客或者内容发布平台

5. 基于react的轻量级可扩展组件库

image.png

github地址: github.com/MrXujiang/x…

npm地址: www.npmjs.com/package/@al…

6. jquery库的轻量级封装

image.png

github地址: github.com/MrXujiang/X…

其他: 支持扩展,定制插件方法

7. 原生文件上传组件

image.png

github地址: github.com/MrXujiang/x…

其他: 后期可采用es6进一步封装

8. 基于react+redux+redux-thunk+localStorage的开源实战项目

image.png

github地址: github.com/MrXujiang/r…

其他: 彻底掌握redux开发方式, 该任务管理平台使用localStorage,数据可长效保存

9. 基于Apify+node+react/vue搭建一个有点意思的爬虫平台

image.png

github地址: github.com/MrXujiang/c…

其他: 一款用于JavaScript的可伸缩的web爬虫模板, 可以基于该平台实现任意网站的图片爬取,网站全屏截图等功能.并可基于此进行二次开发.

  1. 基于React+Koa实现一个h5页面可视化编辑器-Dooring

image.png

github地址: github.com/MrXujiang/h…

其他: H5-Dooring是一款功能强大,开源免费的H5可视化页面配置解决方案,致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主, 后台采用nodejs开发.

11. 开源PC端****页面可视化编辑器-PC-Dooring

image.png

github地址: github.com/MrXujiang/p…

其他: PC Page Maker, PC Editor. Make PC as easy as building blocks. | 让网页制作像搭积木一样简单, 轻松搭建PC页面, Web网站, PC端网站.

12. 开源全栈CMS系统**-simpleCMS**

image.png

github地址: github.com/MrXujiang/s…

其他: simpleCMS是一款开源cms系统, 主要为个人/团队快速开发博客或者知识共享平台, 类似于hexo, worldpress, 但是他们往往需要复杂的搭建过程, 我们将复杂度降到最低, 并且有详细的部署教程, 你只需要有一台服务器, 就能轻松拥有一个属于你的博客平台.

13. 开源简约自由拖拽库rc-drag image.png

github地址: github.com/MrXujiang/r…

其他: An React Component for drag and resize, and supports drag and zoom on mobile devices. | 基于react的轻量级拖拽缩放组件, 且支持移动设备拖拽缩放.

14. 趣图 - qt

image.png

在线 地址: h5.dooring.cn/qt

其他: 趣图是一款轻量级生成抖音风格动效的在线工具, 支持一键导出gif动图, 手动上传图片生成gif动图等功能.

15. 在线三角形代码生成器cssTriangle

image.png

在线地址: h5.dooring.cn/tool/cssTri…

其他: 可视化的生产三角形css代码, 支持3各种形状各种角度的3角形, 不用敲一行代码.

展望

后期笔者会在数据可视化和工程化上输出更多实用的开源项目和框架,如果有其他问题或需求,可以和笔者一起交流研究.


目录
相关文章
|
前端开发 JavaScript 数据安全/隐私保护
推荐6款超级好看的开源中后台前端框架
推荐6款超级好看的开源中后台前端框架
2423 0
|
前端开发 JavaScript CDN
推荐一款稳定快速免费的前端开源项目 CDN 加速服务
推荐一款稳定快速免费的前端开源项目 CDN 加速服务
871 0
|
JSON 前端开发 JavaScript
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
前端(十七)——gitee上开源一个移动端礼盒商城项目(前端+后台)
385 0
|
8月前
|
JSON 前端开发 JavaScript
惊艳!阿里开源 15.2k Star 企业级低代码引擎揭秘,如何变革前端开发方式?
阿里巴巴开源的 LowCodeEngine 是一款企业级低代码引擎,具备可视化编排、UI 渲染、代码生成等全链路能力。支持 React、Vue、Rax 等框架,提供高扩展性与类型安全,助力高效开发,降低维护成本,适用于后台系统、多端同步等场景。
1301 1
|
7月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
1324 0
|
缓存 移动开发 Rust
前端构建工具 Mako 开源了
Hi,我是 sorrycc,Mako 的主要负责人之一,也是 Umi、Dva、Father 等库的作者。 很开心,Mako 终于开源了! Github 地址:https://github.com/umijs/mako/ 今天和大家正式介绍下他。
827 4
|
11月前
|
人工智能 自然语言处理 前端开发
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
1821 93
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
|
8月前
|
Web App开发 前端开发 关系型数据库
GitHub 2.8k star 开源既封神,“Liquid‑Glass‑React”,让你前端界面瞬间拥有苹果级液态玻璃效果!
Liquid-Glass-React 是一款开源前端组件,旨在将 Apple iOS 26 的“液态玻璃”视觉效果引入 React 应用。凭借逼真折射、多种反射模式、响应式交互及高度可配置性,它已获得 2.8k stars,成为提升 UI 质感的热门工具。
939 0
|
9月前
|
人工智能 前端开发 数据可视化
天都塌了,17K+ Star 的AI开源神器!Onlook 如何颠覆前端开发与设计协作?怎么办
Onlook是一款开源的视觉优先代码编辑器,结合Figma直观操作与VS Code强大功能,支持浏览器中实时构建、编辑和部署React应用。项目已获17K+Star,提供快速创建Next.js应用、所见即所得的可视化编辑、AI驱动开发工具及一键部署协作等功能,是前端开发与设计协作的理想选择。
1196 0
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
639 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    883
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    403
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    305
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    278
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    401
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    586
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    630
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    193
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    543
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    347