Skip to main content

开源项目

2024开源项目收集​

大概了解​

项目名称说明备注
shadcn-ui基于tailwindCSS的免费组件框架源码是生成在src目录，非node_model
PlasmoChrome插件集成框架，可配合vue，react，tailwindCSS等快速开发浏览器插件

出海相关​

项目名称说明备注
smart-excel-ai（免费）Next.js。集成了登录、支付（lemon squeezy）、AI功能
Opensaas（免费）React + Node.js。集成了登录、支付（stripe）、邮件、AI功能
Shipfast（付费）Next.js。集成了登录、支付（stripe）、邮件、AI功能
wxt.devChrome开发集成，暂未了解

支付​

技术栈备注
Lemon Squeezy🌟支持个人香港卡、虚拟卡，国内开发者首选
Stripe需要企业资质

域名购买​

平台备注
Namesilo🌟自动屏蔽whois
Namecheap据说比较便宜
Godaddy狗爹，懂的都懂
阿里云 腾讯云 字节火山引擎国内平台，cn域名首选平台

系统优化​

SVG预览​

项目地址

UI组件​

atlassian.design​

Element-UI(饿了么团队)​

做一些中后台产品，中后台项目的时候非常好用，强大的表格组件，基本能胜任大部分后台、中后台项目。

公司大部分80% 的后台项目都用这个框架，容易上车，文档友好

Vant 有赞前端团队​

移动端UI框架，有赞前端团队开源的移动端组件库，

好用，基本每个移动端项目首选的框架

Ant Design​

semantic-ui​

国外一直比较流行的框架，需要使用glup构建，最新版的文档是英文的，暂时只在一个个人项目中用过，组件样式丰富，非常注重状态管理。

目前只用过一次，开发体验还可以，不过让在能使用element的前提下，不会选择。

layui （已停更）​

一个同事非常喜欢用的框架，但是其基于 jquery，与2021年10月13日，官方正式下线，维护工作都迁移到了社区。

官方地址

UI组件（Material design风格）​

Material-UI(React)​

image-20230127113747950

版本对应：

  • Material-UI v4 - React16
  • Material-UI V5 - React17

Vuetify​

image-20230127113728014

漂亮的 Material设计风格，个人项目用过后一发不可收拾，不过内部的组件颗粒度比较细，没有想成的解决方案，想要一个表格需要自己东拼西凑，开发起来相对反而更慢了，不过架不住样式好处，很少需要自己写css的地方。

如果公司的项目不是这么赶时间，肯定会考虑上这个框架。而且有企业版，懂的都懂。

Varlet(Vue3)​

后台整站​

vue-admin-better​

image-20220805100837135

Ant Design Pro​

https://pro.ant.design/zh-CN/docs/css

vue-admin-arco​

https://github.com/chuzhixin/vue-admin-arco

image-20220805101305368

博客整站​

docusaurus（React + node）​

相关博客​

峰华前端​

image-20230209170805535

Hexo（PHP）​

主题丰富：

基于nodejs实现，采用md语法编写文章的博客

Solo（java）​

image-20221121163825745

官方文档

bolo-solo（java）​

image-20221121161732945

官方文档

基于Solo的二次开发博客框架

多主题:

image-20221121161621358

image-20221121161748320

typecho（php）​

image-20230209170325679

相关博客​

失眠海峡​

image-20230209170513596

初之音​

image-20230209170458962

ws/websocket​

vue​

文档整站​

自从知道了markdown，基本日常笔记，日报，生活常记等，都已经完全离不开markdown。通过这类框架能很快生成api文档页或者将笔记转成博客文章，老实说，放弃沉重的hexo和

Docusaurus​

项目首页

image-20230127121208300

image-20230127121220871

VuePress​

VitePress​

VitePress 是 VuePress 的小弟弟，在 Vite 上构建的。(官方原话~)

官方地址

docsify​

直接上传md文件即可生成网页，能快速搭建文档页的框架

bisheng（Ant Design同款）​

gitbook （收费）​

dumi​

storybook​

image-20221121161237643

综合工具​

Jquery​

VueUse​

官方文档

Lodash​

老司机最爱了，以前ES6还没普及的时候用的最多的一个工具库，还记得那段只有jquery和lodash的日子吗 ~

虽然随之ES6越来越多的新功能，lodash的使用率越来越少（仅限本人），但是这个工具库还是非常棒，源码写得很好，非常值得阅读。

取色器​

拖拽相关​

vue-smooth-dnd（smooth-dnd、vue3、vue2）​

文档比较全面，案例好找：演示代码

vue-smooth-dnd官网演示

dnd-kit( react 2024 比较推荐)​

Vue.Draggable（核心使用Sortable.js）​

项目地址：https://github.com/SortableJS/Vue.Draggable

AnyTouch​

image-20220807002047652

官方地址

vue版

一个拖拽的js库

interactjs​

demo、项目地址

使用案例：

npm install --save-dev @interactjs/types interactjs
#or
yarn add @interactjs/types interactjs

基础功能

interactjs

基础功能

基础功能

基础功能

基础功能

vue-draggable​

vue-draggable-resizable-gorkys2.gif

文字识别(OCR)​

GOT-OCR2.0​

项目地址：https://github.com/Ucas-HaoranWei/GOT-OCR2.0

git clone https://github.com/Ucas-HaoranWei/GOT-OCR2.0.git
cd 'the GOT folder'

conda create -n got python=3.10 -y
conda activate got
pip install -e .

pip install ninja
pip install flash-attn --no-build-isolation

打字机特效​

纯CSS​

https://www.bilibili.com/video/BV1aBmhYNE9B/

typedjs(打字机)​

typedjs.gif

TypeLighter.js(打字机) 仅 1.04KB​

<!-- 可以直接通过标签属性定义 -->
<p>
    <span class="typeWriter" 
          data-checkVisible="true"  
          data-speed="2" 
          data-text='["foo", "example"]'
    ></span>
</p>
/* 通过CSS控制样式 */
.cursor {
  color:inherit;
  position:relative;
  font:inherit;
  color:inherit;
  line-height: inherit;
  animation: Cursor 1s infinite;
}

@keyframes Cursor{
  0%{opacity: 1;}
  50%{opacity: 0;}
  100%{opacity: 1;}
}

图片处理​

canvas-img-edit​

纯js+canvas实现的截图

项目地址

image-20230727172539648

vue-cropper-vue3​

项目地址

image-20230727111554123

vue-img-cutter​

项目地址

image-20230726224733780

glfx.js​

项目地址

image-20230726224346117

Filerobot Image Editor (FIE)​

项目地址

image-20230726224036672

FabricJS​

Fabric是一个强大而简单的JS Canvas库，我们能通过使用它实现在Canvas上创建、填充图形、给图形填充渐变颜色。组合图形(包括组合图形、图形文字、图片等）等一系列功能。简单来说我们可以通过使用Fabric从而以较为简单的方式实现较为复杂的Canvas功能

还可以使用Fabric.js库更改这些对象的某些属性，例如它们的颜色，透明度网页上的深度位置，或选择这些对象的组。Fabric.js还可以将SVG图像转换为JavaScript数据，该数据可用于将其放入<canvas>元素。

image-20230726223931390

viewerjs​

项目地址

image-20230721102852050

CropperJS​

项目地址

cropperjs是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用，支持包括IE9以上的现代浏览器。

image-20230726223801413

MarvinJ​

MarvinJ是从 Marvin Framework派生的纯JavaScript图像处理框架。MarvinJ对于许多不同的图像处理应用程序而言既简单又强大。

Marvin 提供了许多算法来操纵颜色和外观。Marvin 还可以自动检测功能。使用基本图像功能(如边缘，拐角和形状）的能力是图像处理的基础。该插件有助于检测和分析对象的角点，从而确定场景中主要对象的位置。由于这些原因，可以自动裁剪出对象。

image-20230726223649691

libgif-js gif处理​

项目地址

通过js对gif图片进行控制

监听 gif 播放完成后执行某些动作：

<template>
    <img ref="img">
</template>
 
<script>
import '../../static/js/libgif.js'
import RubbableGif from '../../static/js/rubbable'
 
export default {
  name: 'Gif',
  props: {
    imgUrl: String // 实列：../../static/gif/tenor.gif
  },
  async mounted () {
    try {
      // 通过异步函数，获取gif文件
      let fetchImg = await fetch(this.imgUrl)
 
      fetchImg.blob().then(blob => {
        // 通过 FileReader 读取文件数据，获取 Base64
        let reader = new FileReader()
        reader.onloadend = () => {
          this.$refs.img.src = reader.result // 输出DataURL数据
 
          // 检测gif 是否完成
          let rubbableGif = new RubbableGif({
            gif: this.$refs.img,
            on_end: () => {
              // 监听gif 完成后，发送一个事件，通知父组件
              this.$emit('gifFinish')
            }
          })
          rubbableGif.load()
        }
        reader.readAsDataURL(blob) // 将blob数据转换成DataURL数据
      })
    } catch (e) {
      console.error('程序错误', e)
    }
  }
}
</script>

相关文献：

icon/图标​

skill-icons​

image-20250401235726995

simple-icons​

自动生成很多常用的图标

Inspira UI​

一个基于vue3的项目，集成了很多常用特效在里面

image-20250401235920277

图片生成​

gradeJS​

grade.js是一款可以根据图片的两种主要颜色生成背景渐变的JS插件。它的原理是提取图片的两种主要颜色，然后使用这两种颜色为渐变的开始和结束颜色，应用在图片容器上。

image-20230726223603100

图片轮播​

Swiper8（全平台）​

中文文档、官方文档

image-20230228100315972

image-20230228100340356

react-slick​

官方地址

image-20230301171429007

Carousel(react)​

官方首页、项目地址

image-20230301171219232

动画、过渡特效​

Ant Motion​

ant旗下的过渡动画库，仅支持React，不过文档做的非常差，已经停止维护，文档的API不直观，组件的使用方式非常模糊且不方便，非常不建议使用

链接、原链接

GIF 2022-3-8 14-59-52

view transition] api​

astro​

FLAPJS​

图片过渡特效

vue-starport​

在线 Demo、项目地址

跨组件带过渡的图片切换，

项目由来：https://www.bilibili.com/video/BV1na41147qR

![GIF 2022-5-9 12-35-58](http://localhost:45462/image/GIF 2022-5-9 12-35-58.gif)

实现原理​

dotLottie Web​

可以将AE动画效果转换为json的库

image-20250226231945121

CSS滤镜库​

CSSgram​

项目地址、官方文档

使用CSSgram项目的滤镜，可以大大降低网页图片展示时产生的带宽，非常多的滤镜已经在css被实现，不用再准备多一张图片

image-20221122152135359image-20221122152146715

CSS动画库​

animate.css​

官方地址

css-doodle​

https://css-doodle.com/

image-20240812183006468

image-20240812182935971

image-20240812182946649

Motion Design​

官方地址

GIF 2022-3-8 14-53-58

GIF 2022-3-8 14-54-17

![GIF 2022-3-8 14-54-49](http://localhost:45462/image/GIF 2022-3-8 14-54-49.gif)

![GIF 2022-3-8 14-55-22](http://localhost:45462/image/GIF 2022-3-8 14-55-22.gif)

canvas增强​

一些行内比较出名的库
PIXI
ZRender
Fabric
kanva

vuetify + canvas 画板​

https://im_roy.gitee.io/gogo/index.html

image-20211210081326318

多功能，带画笔的 canvas 画板​

https://im_roy.gitee.io/etchasketch/palette/zw-palette.html

image-20211210081455036

Kanva​

官方文档

基础功能：

事件总线​

mitt​

官方文档

与node 的EventEmitter 相似的事件总线库，单文件，无依赖（200b）

npm install --save mitt
// using ES6 modules
import mitt from 'mitt'

// using CommonJS modules
var mitt = require('mitt')
import mitt from 'mitt'

const emitter = mitt()

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

// fire an event
emitter.emit('foo', { a: 'b' })

// clearing all events
emitter.all.clear()

// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

监听元素​

element-resize-detector​

监听某个元素的大小变化，可以用VueUse替代

项目地址

npm install element-resize-detector
# or 
yarn add element-resize-detector @types/element-resize-detector
import erd from 'element-resize-detector'

代码高亮​

prismjs​

image-20221229125114748

官方文档

highlight.js​

官方地址、项目地址、中文文档

特色功能：

  • 超多语言支持
  • 支持实时编辑

image-20221228211414826

jsoneditoronline​

项目地址

json5-editor(react)​

image-20221229125058050

项目地址、官方演示

svelte-jsoneditor​

表单组件​

wti-form​

项目地址、文档地址

  • 一个vue2能用的表单组件，而且官方文档的注释非常详细
  • 依赖环境：vue 2.x + elementUI

image-20230121102211816

formilyjs​

官方地址、项目地址

image-20230121100059672

README相关​

自动生成个人简介​

项目地址

windows激活​

编辑器​

monaco-editor(vscode内核)​

项目地址

codemirror​

  • vue-codemirror - 支持vue2、vue3的多语言在线编辑器（好用）

参阅资料​

JSON 转换​

JSON 转换成 typescript​

SSH客户端​

WindTerm​

NxShell​

环境识别（浏览器还是移动设备）​

名称备注地址
ua-parser-js推荐GitHub - faisalman/ua-parser-js: "Unmask Your Traffic" - UAParser.js: The Essential Web Development Tool for User-Agent Detection
device.js推荐GitHub - bowser-js/bowser: a browser detector
platform.jsGitHub - bestiejs/platform.js: A platform detection library.
isMobile
detect-browser停止更新2021
react-device-detect停止更新2022
navigator.userAgent原生方法

office​

docx-preview​

@js-preview/xlsx​

luckysheet​

SheetJS/sheetjs:​

颜色处理​

chroma-js​

pnpm i chroma-js
import chroma from 'chroma-js';

const defaultColor = [
  "#5470c6",
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc",
];

// 函数：生成每个颜色的浅色和深色版本
function generateColorSeries(colors: string[]): string[] {
  const expandedColors: string[] = [];

  colors.forEach((color) => {
    // 使用 chroma.js 生成浅色和深色版本
    const lightColor = chroma(color).brighten(2).hex(); // 生成浅色
    const darkColor = chroma(color).darken(2).hex();   // 生成深色

    // 将原色、浅色、深色分别添加到数组中
    expandedColors.push(color, lightColor, darkColor);
  });

  return expandedColors;
}

// 扩展颜色系列
const expandedColors = generateColorSeries(defaultColor);
console.log(expandedColors);

文件转换​

File Converter​

一款免费开源的桌面工具，支持通过 Windows 右键菜单直接转换文件格式，包括 WPS 转 Word。底层依赖 Ghostscript、ImageMagick 等中间件实现高效转换

核心功能：

  • 支持输入格式：WPS（.wps）、DOC、DOCX 等。

  • 输出格式：Word（.doc/.docx）、PDF、HTML 等。

  • 可自定义转换参数，保留原文档排版。

  • 开源协议：MIT。

  • 源码地址：https://github.com/Tichau/FileConverter

卡片特效​

3D卡片鼠标错位浮动​

项目地址

image-20250327160906282

13kb小游戏​

项目首页

3D 标签球体滚动​

react-icon-cloud​

这是一个基于TagCanvas的项目，

131417256-58058879-f14c-4c03-9bdf-03bd1c80f25d