前端常用npm库大全-vue,react,通用(持续更新)

ops/2024/12/16 8:01:01/

构建工具

Name/GitHub/NPM

描述

演示地址

Vite

下一代的前端工具链

Create React App

通过运行一个命令来设置现代 Web 应用程序。

Create React App中文文档

通过运行一个命令来设置现代 Web 应用程序。

Webpackjs

强大的静态模块打包工具,主要用于现代JavaScript应用的构建和打包

Rollup

将点滴代码编织成错综复杂的程序。

vite-plugin-mock-dev-server

在vite 开发环境中注入 mock-dev-server, 模拟请求和数据响应

小程序/Uniapp

Name/GitHub/NPM

描述

演示地址

微信小程序官方文档入口

小程序,小游戏,等文档

taro

Donut

Donut 平台覆盖开发、部署、产品体验分析全产品开发周期的各种需求。开发者可以专注于代码逻辑,其他的都交给我们。

uni-helper

旨在增强 uni-app 系列产品的开发体验

基础Vue

Name/GitHub/NPM

描述

演示地址

Vue-Router

Vue Router 是 Vue 官方的客户端路由解决方案。

Vue-Cli

?? Vue.js 开发的标准工具

Vue2

渐进式 JavaScript 框架

Vue3

渐进式 JavaScript 框架

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。

Pinia

符合直觉的 Vue.js 状态管理库

Umijs

用 Umi 构建你的下一个Vue应用

Nuxt

NuxtJS 让你构建你的下一个 Vue.js 应用程序变得更有信心。这是一个 开源 的框架,让 web 开发变得简单而强大。

基础React

Name/GitHub

描述

演示地址

preactjs

React 的轻量级替代方案,体积仅有 3kB,并且拥有与 React 相同的 API

React 文档

The library for web and native user interfaces

craco

Create React App 配置覆盖,这是一个用于 Create React App 的简单易懂的配置层。

react-redux

Redux 的官方 React 绑定

redux-toolkit

The official, opinionated, batteries-included toolset for efficient Redux development

redux中文文档

React-router

Nextjs

The React Framework for the Web

Umijs

用 Umi 构建你的下一个 React 应用

飞冰 (ICE)

基于 React 的应用研发框架,开箱即用,同时支持移动端和桌面端

NPM库

VUE专用库

Name/GitHub

描述

演示地址

vueuse

Vue 组合实用程序集合

vuefire

VueFire Official Firebase bindings for Vue.js Idiomatic composables for realtime data and other Firebase services

vue-grid-layout

Vant

UI组件库-Mobile

Antd-vue

UI组件库-PC

Datav-vue

Vue 大屏数据展示组件库

Tdesign-Vue

UI组件库-PC

varlet

UI组件库-PC

vue-awesome-swiper

?? Swiper component for @vuejs

vee-validate

vue-transitions

Reusable interface transitions for Vue 2 and Vue 3 with no CSS needed

vue-office

支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3。也支持非Vue框架的预览。文档https://501351981.github.io/vue-office/examples/docs/

vue-plugin-hiprint

vue-plugin-hiprint(基于hiprint 2.5.4) 当时只是为了方便我(并非hiprint原作者) 在vue项目中引入使用,所以以此命名。打印模板

vue-macros

Vue Macros 体验超现代 Vue 探索更多的宏和语法糖到 Vue 中。

pinia-plugin-persistedstate

pinia持久化

React专用库

Name/GitHub

描述

演示地址

AHooks

一套高质量可靠的 React Hooks 库

zustand

一个小型、快速、可扩展的熊骨状态管理解决方案,采用简化的通量原理。它有一个基于钩子的舒适应用程序接口,没有模板化,也没有主观臆断。

dvajs

React and redux based, lightweight and elm-style framework.

Datav-React

React 大屏数据展示组件库

Tdesign-React

UI组件库

Antd-Mobile

UI组件库-Mobile

uiw

UI组件库-A Component Library for React 16+.

mui

UI组件库-Move faster with intuitive React UI tools

fusion

企业级的中后台设计系统解决方案

MobX

简单、可扩展的状态管理

emoji-picker-react

Emoji 选择器 React

Immer

Immer(德语为:always)是一个小型包,可让您以更方便的方式使用不可变状态。

通用库

Name/GitHub

描述

演示地址

Echarts

图表

Bootcss

样式

Swiper

工具-轮播图

JQuery

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。

lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

lottiefiles

为您的网站和应用程序提供轻量级、可扩展的动画

Mock

生成随机数据,拦截 Ajax 请求

Numeral-js

用于格式化和处理数字的 javascript 库。

clipboardjs

将文本复制到剪贴板的现代方法 没有 Flash。没有框架。压缩后只有 3kb

browserslist

共享浏览器兼容性配置,适用于 Autoprefixer、Babel、ESLint、PostCSS 和 Webpack 等流行 JavaScript 工具

Socket.IO

支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作,可靠性和速度同样稳定。

msw

Mock Service Worker是一个 API 模拟库,允许您编写与客户端无关的模拟并在任何框架、工具和环境中重复使用它们。

jestjs

Jest 是一款优雅、简洁的 JavaScript 测试框架。

animejs

是一个轻量级 JavaScript 动画库,具有简单但功能强大的 API。 它可与 CSS 属性、SVG、DOM 属性和 JavaScript 对象配合使用。

smooth-scrol

一个轻量级脚本,用于为滚动到锚点链接制作动画。

https://codepen.io/cferdinandi/pen/wQzrdM

isotope-layout

过滤和排序神奇的布局(排序的时候有一个动画效果)

nodemailer

Nodemailer是 Node.js 应用程序的一个模块,可让您轻松发送电子邮件。

cheerio

用于解析和操作 HTML 和 XML 的快速、灵活且优雅的库。

relationship

中国亲戚关系计算器 - 家庭称谓/亲戚称呼/称呼计算/辈分计算/亲戚关系算法/親戚稱呼計算機_Chinese kinship system

mande

Simple, light and extensible wrapper around fetch with smart defaults

vestjs

Vest 是一个功能强大且易于使用的 JavaScript 验证框架,可让您编写和运行代码验证

pinyin

pīnyīn, 汉字拼音转换工具。

aplayer

?? Wow, such a beautiful HTML5 music player

fastclick

FastClick 是一个简单易用的库,用于消除click移动浏览器上物理点击和触发事件之间的 300 毫秒延迟

autofit.js

迄今为止最易用的自适应工具(描述是这样的)

howler

howler.js是一个适用于现代网络的音频库。它默认使用Web Audio API,并可回退到HTML5 Audio。这使得使用 JavaScript 处理音频在所有平台上都变得简单而可靠。

opentype.js

使用 JavaScript 读取和写入 OpenType 字体。

print-js

一个小型的 JavaScript 库,帮助从网络打印。

Fuse.js

强大、轻量级的模糊搜索库,没有任何依赖关系。

Typr.js

Typr.js - process fonts in Javascript

https://photopea.github.io/Typr.js/

midnight.js

Midnight.js 可让你即时切换固定标题

https://aerolab.github.io/midnight.js/

Zepto

Zepto是一个适用于现代浏览器的极简 JavaScript 库,具有与jQuery高度 兼容的 API 。 如果您使用 jQuery,那么您已经知道如何使用 Zepto。

Nodemon

Nodemon 是一个大约有 300 万个项目依赖的实用程序,它将监视源代码中的任何更改并自动重启服务器。非常适合开发。

alova

一行代码完成各种复杂场景的网络请求,别再花时间在请求这件小事上了,交给我们

magika

使用深度学习检测文件内容类型

JQuery插件库

帝国CMS源码

收费,做来参考吧

zindex

z-index 管理器

terser

适用于 ES6+ 的 JavaScript 压缩器/压缩工具包。

tippy.js

适用于 Web 的完整工具提示、弹出窗口、下拉菜单和菜单解决方案

Yup

Yup 是一个用于运行时值解析和验证的模式构建器。定义架构、转换值以匹配、断言现有值的形状,或两者兼而有之。是的,模式非常具有表现力,并且允许对复杂的、相互依赖的验证或值转换进行建模。

jsdom

jsdom 是许多 Web 标准(尤其是 WHATWG DOM和HTML标准)的纯 JavaScript 实现,用于 Node.js。总体而言,该项目的目标是模拟足够多的 Web 浏览器子集,以便用于测试和抓取真实的 Web 应用程序。

npm-check-updates

npm-check-updates (ncu)将您的 package.json 依赖项升级到最新版本,忽略指定的版本。

highlightjs

高亮

prismjs

高亮

prettier配置生成

生成配置

es-toolkit

一个现代 JavaScript 实用程序库,速度提高 2-3 倍,体积缩小 97% — — 这是 lodash 的重大升级。

xe-utils

javascript 函数库、工具类 文档地址https://vxetable.cn/xe-utils/#/

StreamSaver.js

StreamSaver.js 采用了不同的方法。现在,您实际上可以直接在文件系统中创建可写流(我不是在谈论 Chrome 沙盒文件系统或任何其他 Web 存储),而不是将数据保存在客户端存储或内存中。这是通过模拟服务器如何使用某些响应标头 + 服务工作线程指示浏览器保存文件来实现的

组件开发

地址

描述

dumi

dumi,中文发音嘟米,是一款为组件开发场景而生的静态站点框架,与 father 一起为开发者提供一站式的组件开发体验,father 负责组件源码构建,而 dumi 负责组件开发及组件文档生成

father

father 是一款 NPM 包研发工具,能够帮助开发者更高效、高质量地研发 NPM 包、生成构建产物、再完成发布。它主要具备以下特性:

histoire

vitepress

由 Vite 和 Vue 驱动的静态站点生成器

Verdaccio

Verdaccio 是一个 Node.js创建的轻量的私有npm proxy registry

rollup-plugin-visualizer

一个强大且直观的工具,用于帮助开发者在使用 Rollup 打包时,生成详细的模块依赖图谱。通过可视化的方式,你可以清晰地理解代码的打包结构和优化潜在点,从而更高效地管理和优化你的 JavaScript 应用程序。

CSS样式

Name/GitHub

描述

演示地址

tailwindcss

一个实用优先的 CSS 框架,其中包含诸如、和之类的类,这些类可直接在您的标记中组合以构建任何设计。 flex pt-4 text-center rotate-90

daisyui

The most popular component library for Tailwind CSS

enjoycss

EnjoyCSS 是一个先进的 CSS3 生成器,可以让您摆脱常规编码。

neumorphism

盒子阴影样式

meshgradient

渐变

noiseandgradien

渐变

meshgradient

渐变毛玻璃

navnav

一些基础的样式

oulu

一个集合180种免费的线性渐变网站,可在任何网站使用(ps:网站还禁止调试…)

webgradients

线性渐变(比上面的更好)

coolors

调色板生成器!(也就是颜色)

dribbble

从世界各地数百万顶级设计师和机构的作品中获得灵感。

dribbble下的css_loader

uiverse

使用 CSS 或 Tailwind 制作的自定义元素。UI Verse 是一个开发资源整合类的网站,内部提供了 4500+ 种不同的 css 特效

加载动画css

加载动画

sliderrevolution

不仅仅是一个 WordPress 滑块

cssloaders

很多加载效果css动画

css-loaders

几个加载效果css动画

loading

Ajax 加载器、动画图标、实时背景

css-box-shadow

Beautiful CSS box-shadow examples

uiverse.io

Open-Source loaders made with CSS or Tailwind(使用 CSS 或 Tailwind 制作的开源加载器)

字体和素材库

Name/GitHub

描述

演示地址

iconpark

字体图标-丰富多彩的资源库免费使用

iconfont

字体图标

illust

下載免費矢量圖和剪貼畫

transfonter

现代而简单的 css @font-face 生成器

fontawesome

Font Awesome 是互联网的图标库和工具包,被数百万设计师、开发人员和内容创建者使用。

iconshock-渐变svg图

专为渐变爱好者制作的 免费交互式 SVG 图标包 !

lexica

AI生成的图片大全

unsplash

也是一个图片网站

稿定

国产的…可能要收费

创客贴

国产的…可能要收费

Canva可画

使用Canva可画,轻松创建并分享专业设计。(可能要收费)

爱给网

爱给网_音效配乐_3D模型_视频素材_免费下载

文档和工具

地址

描述

MDN

文档

CanIuse

用于前端开发者查询各种Web技术在不同浏览器中的兼容性。其主要功能和用途包括:

npmTrends

用于比较NPM(Node Package Manager)包下载趋势和受欢迎度的工具

贝赛尔曲线 cubic-bezier

js代码压缩混淆

jsnice

旨在美化和反混淆JavaScript代码。其主要功能和用途包括:

babel

用于将现代JavaScript代码转换为兼容性更好的旧版JavaScript代码。

less

给 CSS 加点料。

jquery之家

自由分享jQuery、html5和css3的插件库

less编译

less编译

stackoverflow

问答交流

思否

问答交流

文档速查

十分推荐

油猴文档

油猴必备

JSDOC

JSDoc 3 是一个用于 JavaScript 的API文档生成器,类似于 Javadoc 或 phpDocumentor

W3C

前端最最最标准文档

ES6入门-阮一峰

ES6入门-阮一峰

javascript-guidebook

??JavaScript 知识图谱:ECMAScript、DOM、BOM、HTML5、计算机网络

React中文文档

React中文文档

w3schools

也是比较好的文档

bundlephobia

包大小查看

在线部署/在线运行/第三方服务提供

地址

描述

netlify

vercel

codepen

codesandbox

stackblitz

4everland

upstash

planetscale

The ultimate MySQL database platform

algolia

cyclic

render

jsfiddle

jsbin

强大的在线编辑

国内-runjs

在线运行

runjs

探索和试验 JavaScript 和 TypeScript,将您的想法形象化并在打字时获得即时反馈。

跨平台的桌面应用程序

地址

描述

tauri

electron-vite


http://www.ppmy.cn/ops/142329.html

相关文章

渗透测试学习笔记(四)web漏洞

一.web相关漏洞 漏洞分类漏洞类型Web 源码类漏洞SQL 注入,文件上传,XSS,代码执行,变量覆盖,逻辑漏洞,反序列化Web 中间件漏洞未授权访问,变量覆盖数据库漏洞弱口令,权限提升系统层漏…

一款基于Fluent设计风格、现代化的WPF UI控件库

前言 今天大姚给大家分享一款基于Fluent设计风格、开源(MIT License)、现代化的WPF UI控件库,它提供直观的设计、主题、导航和全新的沉浸式控件,全部都是原生且无缝地集成在一起:WPF UI。 WPF介绍 WPF 是一个强大的桌…

Git登入使用GitHub上的仓库

1、打开git-bash.exe设置参数 git config –global 参数 git config –global user.name "xxx" git config –global user.email "xxxxxxx.com" 2、Github账户设置SSH key 生成ssh key ssh-keygen -t rsa -C “xxxxxxxxx.com” 回车确认默认路径和无密码 在…

设计模式:24、访问者模式

目录 0、定义 1、访问者模式的五种角色 2、访问者模式的UML类图 3、示例代码 0、定义 表示一个作用于某对象结构中的各个元素的操作。它可以在不改变各个元素的类的前提下,定义作用于这些元素的新操作。 1、访问者模式的五种角色 抽象元素(Element…

相位小数偏差(UPD)估计基本原理

PPP中的一个关键性难题在于非差模糊度固定,成功固定非差模糊度可以使 PPP 的收敛速度和定位精度得到显著提升 。 相位小数偏差 (UPD) 是致使相位模糊度失去整数特性的主要因素,精确估计并校正 UPD 是实现非差模糊度固定的重要前提,也是实现…

OpenCV相关函数

一、二值化函数(threshold) 功能:将灰度图像转换为二值图像,通常用于图像分割。通过设置阈值,把图像中低于阈值的像素设为0,高于阈值的像素设为1。 参数: src:输入图像。 thresh&a…

【初识数据结构】堆的详解以及Topk问题

数据结构第七课 1. 前言🚩2. 堆的概念以及结构🚩3. 堆的实现🚩3.1 初始化结构🏴3.2 初始化函数🏴3.3 插入函数🏴3.4 向上调整函数🏴3.5 删除函数🏴3.6 向下调整函数🏴3.7…

【html 常用MIME类型列表】

本表仅列出了常用的MIME类型,完整列表参考文档。 浏览器通常使用 MIME 类型(而不是文件扩展名)来确定如何处理 URL,因此 Web 服务器在响应头中添加正确的 MIME 类型非常重要。 如果配置不正确,浏览器可能会曲解文件内容…